我正在开发一个web应用程序，我希望内容能够填满整个屏幕的高度。
该页面有一个标题，其中包含徽标和帐户信息。这可以是任意高度。我希望contentdiv将页面的其余部分填充到底。
我有一个header div和一个content div。目前，我正在为布局使用一个表，如下所示：
CSS和HTML
#第页{高度：100%；宽度：100%}#td含量{高度：100%；}#内容{溢出：自动；/*或溢出：隐藏*/}<table id=“page”><tr><td id=“tdheader”><div id=“header”></分区></td></tr><tr><td id=“tdcontent”><div id=“content”></分区></td></tr></table>
页面的整个高度已填充，不需要滚动。
对于contentdiv中的任何内容，设置top:0；会把它放在标题下面。有时内容将是一个真实的表格，其高度设置为100%。将标题放在内容内不允许这样做。
有没有一种方法不使用桌子就能达到同样的效果？
更新：
contentdiv中的元素也将高度设置为百分比。因此，div中100%的内容将填充到底部。50%的两个元素也是如此。
更新2:
例如，如果标题占屏幕高度的20%，则在#内容内部指定50%的表将占屏幕空间的40%。到目前为止，把整个东西包在桌子里是唯一有效的方法。
在Bootstrap中：
CSS样式：
html, body {
height: 100%;
}
1） 只需填充剩余屏幕空间的高度：
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div>Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
2） 填充剩余屏幕空间的高度，并将内容与父元素的中间对齐：
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
仅限CSS进近（如果高度已知/固定）
当您希望中间元素垂直跨越整个页面时，可以使用CSS3中引入的calc（）。
假设我们有一个固定高度的页眉和页脚元素，我们希望section标记采用整个可用的垂直高度。。。
Demo
假设标记和CSS应为
html，正文{高度：100%；}收割台，收割台{高度：100px；背景：灰色；}部分{高度：计算（100%-（100px+150px））；/*添加100px的页眉和150px的页脚*/背景：番茄；}页脚{高度：150px；背景色：蓝色；}<header>100px</header><section>展开我的剩余空间</section>＜footer＞150像素</footer＞
所以在这里，我要做的是将元素的高度相加，然后使用calc（）函数从100%中减去。
只需确保使用高度：100%；对于父元素。
我也有同样的问题，但我无法用上面的柔性箱解决问题。因此，我创建了自己的模板，其中包括：
具有固定大小元素的标头页脚带有滚动条的侧栏，占据剩余高度所容纳之物
我使用了flexbox，但方法更简单，只使用了财产display:flex和flex-direction:row|column:
我确实使用了angular，我希望我的组件大小是它们的父元素的100%。
关键是为所有父母设置大小（以百分比为单位），以限制他们的大小。在以下示例中，myapp高度占视口的100%。
主组件占视口的90%，因为页眉和页脚占5%。
我在这里发布了我的模板：https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html：
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
它从未像NICCAI在第一个答案中建议的那样，以其他方式对我起作用。我正在使用这种方法用谷歌地图重新缩放＜div＞。
以下是如何做到这一点的完整示例（适用于Safari/FireFox/IE/iPhone/Androrid（适用于旋转））：
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
