我简化了下面的布局以表明我的意思。两列都需要 100%，但问题是如果 1 列中的内容将其拉伸(stretch)到 100% 高度以下导致滚动条，那么另一列将保持窗口的 100% 高度。有没有办法确保两个 div 始终占据文档的整个高度？如果你使用下面的 html，你会看到当你向下滚动时，左列高度保持在窗口的原始高度。有没有javascript的解决方案？谢谢!
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
min-height: 100%;
}
* {
margin: 0;
padding: 0;
}
.column {
min-height: 100%;
background: red;
position: absolute;
width: 200px;
}
#left {
left: 100px;
}
#right {
left: 400px;
}
#content {
/* This height will be unknown. 2000px is just for example to push right column down*/
height: 2000px;
}
</style>
</head>
<body>
<div id="left" class="column"></div>
<div id="right" class="column">
<div id="content"></div>
</div>
</body>
</html>
最佳答案
如果它只是插入高度的内容，您可以通过将其设置为 max-height: 100% 或将其设置为 overflow: hidden 来解决它以阻止它发生。
关于html - 2列绝对布局需要都是100%高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13375791/