我希望一个 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>最佳答案
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
关于javascript - 根据视口(viewport)高度及其位置自动计算div的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29735982/