如何在纯HTML/CSS中创建无JS的动态水平布局？
如何在纯HTML/CSS中创建无JS的动态水平布局？
提问于 2010-12-17 12:38:17
看看这个例子：http://jsbin.com/ixiju4/2/edit
我有一个包装器，它的高度是定义的，里面有两个容器：顶层和底部。顶部容器的高度不是固定的(在示例中它被设置为100 it，但这只是为了演示)。我想要的是动态地设置底部容器来填充包装器的其余部分。
在这个演示中，我使用了JS：
$(function() {
var top = $('#top');
var bottom = $('#bottom');
bottom.height(bottom.parent().height()-top.outerHeight());
});你认为在纯HTML/CSS中有什么方法可以做到吗？无论如何，我甚至可以使用表。我考虑这个解决方案已经有一段时间了，但还没有找到任何跨浏览器兼容的解决方案。谢谢你的帮助。
更新1:，我在定义这个问题时犯了一个错误，顶层没有固定的高度--它是由它的内容定义的。http://jsbin.com/ixiju4/6
更新2:确定。这就是我真正想要的：http://jsbin.com/ixiju4/8
回答 2
Stack Overflow用户
发布于 2010-12-17 12:55:32
这里有一个非常简单的纯CSS解决方案：
#wrapper {
position: absolute;
width: 100%;
height: 100%;
}
#top {
height: 100px;
width: 100%;
background-color: #00f4f7;
}
#bottom {
background-color: #00f400;
width: 100%;
height: 100%
}从您的上一轮编辑到问题的更新2，我已经相应地更新了CSS，即：
#wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#top {
background-color: #00f4f7;
}
#bottom {
background-color: #00f400;
height: 100%;
padding: 10px;
}
#inner {
height: 100%;
background-color: #f0f400;
margin-bottom: 10px;
}Stack Overflow用户
发布于 2010-12-17 12:44:29
好吧，如果你能用桌子：
<table style="height:400px">
<tr>
<td style="height:100px">Fixed to arbitrary value</td>
</tr>
<tr>
<td style="height:auto">Dynamically filling</td>
</tr>
</table>http://jsbin.com/ixiju4/3
免责声明：亲爱的谷歌人，如果你找到这个答案:不要在家里这样做！造型的桌子是邪恶的。除了IE <8外，使用display: table和display: table-row在其他方面都能达到同样的效果。
编辑2: OK，为了完整性：
#wrapper { display: table; }
#top, #bottom { display: table-row; }不工作在IE < 8，如前所述。http://jsbin.com/ixiju4/5
编辑3:，我真的是瞎了。是的，小巨人工作室用显而易见的方法回答了这个问题。你应该跟着他的回答。(我是为了完整而离开我的。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4470521
复制相关文章
相似问题
腾讯云开发者
