小编zak*_*cit的帖子

页眉和页脚之间高度的计算

我创建了sidenav推.我写了一个javascript函数来计算我的页眉和页脚之间的剩余高度:

function resizeWindow(){
  var headerHeight = $("#header-web").height();
  var footerHeight = $("#web-footer").height();
  var windowHeight = $("html").height();
  var remainHeight = windowHeight-headerHeight-footerHeight;
  $("#mySidenav").css({"height":remainHeight});
}

Run Code Online (Sandbox Code Playgroud)

然后我在负责打开sidenav的那个内部调用它:

function openNav() {
  resizeWindow();
  document.getElementById("mySidenav").style.width = "400px";
  document.getElementById("map").style.marginRight = "250px";
}

Run Code Online (Sandbox Code Playgroud)

我正在使用Mac,当窗口完全打开时,sidenav占据了它的适当位置,但是当它减少或者我试图在另一台计算机上打开它时,div在页眉和页脚之间没有很好的位置.

以下捕获显示了该问题:

如果您对可能导致问题的原因有所了解,我将不胜感激,向您学习!

javascript css

zak*_*cit

2018 12-04

5
推荐指数

1
解决办法

426
查看次数

Bootstrap 行重叠

我有一个问题。我正在尝试使用 4 行制作引导网格系统，但问题是某些行重叠。我不知道这个问题从何而来。这个小提琴显示了我的问题

html, body{
    width: 100% !important;
    height: 100% !important;
    padding:0;
    position: relative;
  }
  #header-sec{
    position: absolute;
    /*top: 0;*/
    width: 100%;
    background-color: green;
    height : 15%;
    min-height: 30px;
  }
  #footer-sec{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: black;
    height : 5%;


  }
  #data-viewer{
    height : 60%;

  }
  #zone-geog{
    height : 20%;

  }

Run Code Online (Sandbox Code Playgroud)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container-fluid">
    <div id="header-sec" class="row">
        <div class="col-sm-12">header</div>
    </div>
    <div id="zone-geog" class="row">
      <div class="col-sm-12">
        zone geog
      </div>
    </div>
    <div id="data-viewer" class="row bg-primary">
        <div class="col-sm-9">map</div> …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

zak*_*cit

2017 08-15

2
推荐指数

1
解决办法

1万
查看次数