根据视口高度及其位置自动计算div的高度

Question

我希望 div 填充当前位置和页面底部之间的整个屏幕高度。在底部，显示了一个页脚。

目前，我正在使用 CSS 来确定 2 列的高度（见下文 - 它在其父级 div 中有一个绝对位置）。它基本上工作但不考虑信息面板的变化高度，因为它总是减去 -20px；如果显示信息面板，则需要减去大约 200px；

top: 0px;
position: absolute;
overflow-y: auto;
height: calc(100vh - 20px);

如何确定 div 的高度，使其从 top:0 一直延伸到屏幕底部 - 页脚为 20px？滚动条（如果显示）应始终到达底部。

谢谢！

 
$(function () {
  $("#infotitle").click(function () {
 
   $('#infopanel').toggle();
  });

 });

* { margin:0px; 
 padding:0px
}

body {
        margin: 0;
        padding: 0;
    }


body {
    background-color: #FFFFFF;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 0.8em;
    overflow: hidden;
    overflow-y: auto;
}

header {
    height: 30px;
    background-color: #222;
    margin: 0;
    padding: 0;
 display:block;
}

header h1 {
    color: #FFFFFF;
    padding-left: 20px;
    line-height: 30px;
}

h1 {
    font-size: 1.3em;
    font-weight:normal;
}

footer {
 height: 30px;
 z-index: 1;
 background-color: #000000;
 height: 30px;
 width: 100%;
 position: absolute;
 bottom: 0px;
 z-index: -1;
}

.filler {
 height: 8em;
 clear: both;
}

.init {
    overflow-y: hidden;
    overflow: hidden;
}

.ym-wrapper {
 width: 1100px;
 margin: 0 auto;
 padding: 10px;
 
}
* { margin:0px; 
 padding:0px
}

body {
        margin: 0;
        padding: 0;
    }


body {
    background-color: #FFFFFF;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 0.8em;
    overflow: hidden;
    overflow-y: auto;
}

header {
    height: 30px;
    background-color: #222;
    margin: 0;
    padding: 0;
 display:block;
}

header h1 {
    color: #FFFFFF;
    padding-left: 20px;
    line-height: 30px;
}

h1 {
    font-size: 1.3em;
    font-weight:normal;
}

footer {
 height: 30px;
 z-index: 1;
 background-color: #000000;
 height: 30px;
 width: 100%;
 position: absolute;
 bottom: 0px;
 z-index: -1;
}

.filler {
 height: 8em;
 clear: both;
}

.init {
    overflow-y: hidden;
    overflow: hidden;
}

.ym-wrapper {
 width: 1100px;
 margin: 0 auto;
 padding: 10px;
 
}

.ym-grid {
 display: block;
 table-layout: auto;
 width: 100%;
 list-style-type: none;
 padding-left: 0;
 padding-right: 0;
 margin-left: 0;
 margin-right: 0;
}

.ym-960-5 {
 width: 400px;
 background: lightsteelblue;
 margin-right: 0px;
 position: relative;
 z-index: -3;
 height: 70px;
}
.ym-960-5 h3 {
padding: 10px;
margin-right: 2px;
width: 150px;
float: left;
}

.content-left {
 top: 70px;
 position: absolute;
 overflow-y: auto;
 height: calc(100vh - 300px);
 width: 100%;
}

.ym-gl {
 float: left;
 margin: 0;
}

.ym-g960-7 {
 width: 700px;
 position: relative;
 z-index: -3;
}
#infopanel, #infotitle {
    border: 1px solid #46c94b;
    background: rgba(162, 255, 133, 0.42)  50% top repeat-x;
    color: #363636;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    display: table;
}



.infotext {
    width: auto;
    display: table-cell;
    height: 100%;
    padding: 10px;
}

#infonext {
    width: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 10px;
}

.ym-grid {
 display: block;
 table-layout: auto;
 width: 100%;
 list-style-type: none;
 padding-left: 0;
 padding-right: 0;
 margin-left: 0;
 margin-right: 0;
}

.ym-960-5 {
 width: 400px;
 background: lightsteelblue;
 margin-right: 0px;
 position: relative;
 z-index: -3;
 height: 70px;
}
.ym-960-5 h3 {
padding: 10px;
margin-right: 2px;
width: 150px;
float: left;
}

.content-left {
 top: 70px;
 position: absolute;
 overflow-y: auto;
 height: calc(100vh - 300px);
 width: 100%;
}

.ym-gl {
 float: left;
 margin: 0;
}

.ym-g960-7 {
 width: 700px;
 position: relative;
 z-index: -3;
}
#infopanel, #infotitle {
    border: 1px solid #46c94b;
    background: rgba(162, 255, 133, 0.42)  50% top repeat-x;
    color: #363636;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    display: table;
}



.infotext {
    width: auto;
    display: table-cell;
    height: 100%;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>

 <title>Title</title>
 <link rel="stylesheet" href="test.css" type="text/css"/>
 <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body class="init">
 <header>
  <h1>Title</h1>
 </header>

 <div class="content">
  <div class="ym-wrapper">

   <div class="ym-grid">
    <div id="infotitle">
     <div class="infotext">
      <h3>Title</h3>Click to show/hide panel.
     </div>
    </div>
    <div id="infopanel">
     <div class="infotext">
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
     </div>
    </div>
    <div class="ym-960-5 ym-gl">
   
     <div><h3>text</h3></div>
     <div class="content-left">
    
      <div id="poiList">
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
       <p>text</p>
      
      </div>
      <div class="filler"></div>
     </div>
    </div>
    <div class="ym-g960-7 ym-gl">
     <p>text</p>
     <p>text</p>
     <p>text</p>
     
    </div>
   </div>
  </div>
 </div>
         
 <footer>
  <div id="outer-container">
   <div id="container-background"></div>
   <div id="container">
   </div>
  </div>
 </footer>
</body>
</html>

Answer 1

jquery中有一个计算身高的函数你可以像

一样使用它

$(document).ready(function(){
   $("div").height();

}); // This function is used for calculating height when not in responsive
$(document).resize(function(){
   $("div").height();
}); // This function is used for calculating responsive designs on resize

根据视口高度及其位置自动计算div的高度

Calculate height of div automatically based on height of viewport and its position

javascript

css

dynamic

height