是否可以制作一个基于无表的布局，从而允许#bottom元素在不使用JavaScript的情况下填充父元素中剩余的100％剩余空间？
这是使用表时的工作方式：
<html>
<head>
<style>
table{
height: 100%;
width: 100%;
}
#top{
background-color: blue;
height: 200px;
}
#bottom{
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr id="top">
<td></td>
</tr>
<tr id="bottom">
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
最佳答案
<html>
<head>
<style>
* { padding: 0px; margin: 0px; }
body {
height: 100%;
}
#main {
height: 100%;
width: 100%;
position: relative;
}
#top{
background-color: blue;
height: 200px;
}
#bottom{
background-color: red;
position: absolute;
bottom: 0px;
top: 200px;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
您实际上并不需要#main，我只是想不必要地保留我的东西。
关于html - 可以在没有表格或JavaScript的情况下完成此操作:100％的高度将剩余容器的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/796367/