我正在开发一个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%。到目前为止,把整个东西包在桌子里是唯一有效的方法。
我的一些组件是动态加载的,这给我设置导航栏的高度带来了问题。
我所做的是使用ResizeObserver API。
function observeMainResize(){
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
$("nav").height(Math.max($("main").height(),
$("nav") .height()));
}
});
resizeObserver.observe(document.querySelector('main'));
}
那么:
...
<body onload="observeMainResize()">
<nav>...</nav>
<main>...</main>
...
仅限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%;对于父元素。
它从未像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>