如何将100%的高度应用到div？
如何将100%的高度应用到div？
提问于 2009-11-30 16:14:56
我想让最后一个/第三个div填充整个剩余空间。我给了100%的高度，但有滚动条来了，我不想显示。我有任何CSS的解决方案。如果css不支持，那么jQuery/JS解决方案也可以。
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>回答 12
Stack Overflow用户
回答已采纳
发布于 2009-11-30 17:29:09
在jQuery中，您可以尝试如下所示：
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});无论何时调整窗口大小，最后一个div的高度都会被修改，以便div延伸到页面底部。窗口的resize方法在页面加载时调用，以便立即调整div的大小。
如果从窗口高度减去div的顶部偏移量，剩下的就是可用的最大高度。如果您应用了边距、填充边框，则可能需要调整减去的值，例如：
$('div:last').height($(window).height() - $('div:last').offset().top - 30);假设你想要窗口底部的div 30px。
Stack Overflow用户
发布于 2009-11-30 16:20:49
在现代浏览器上:在容器div上设置position: relative，在第三个div上设置position: absolute。然后，您可以将其同时定位到容器的顶部和底部：top: 0px、bottom: 0px;
Stack Overflow用户
发布于 2009-11-30 16:44:26
您还可以通过向CSS添加垂直重复的背景图像来使用仿制列，使这些列看起来像玩具空间-这就提供了外观。您可以将此图像添加到包装三列的div或body标记中。
如果这些列将包含内容，那么添加一些内容可能是值得的，因为这些列的行为会有所不同。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1818467
复制相关文章
相似问题