我想为前两个 div 指定固定高度，并为接下来的两个 div 指定百分比值。
最后一个 div 应该占据前一个 div 留下的所有空间（到浏览器窗口的底部）。我如何在CSS中实现这个..？
这是我的 css+html。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
html
{
height:100%;
}
body
{
margin:0;
padding:0;
height:100%;
}
header
{
height:20px;
width:100%;
background-color:red;
}
.container2
{
height:40px;
width:100%;
background-color:#11ccdd;
}
.container3
{
height:35%;
width:100%;
background-color:#bacdef;
}
.subcontainer1
{
float:left;
height:35%;
width:50%;
background-color:#569895;
}
.subcontainer2
{
float:left;
height:35%;
width:50%;
background-color:#dbc462;
}
.container4
{
width:100%;
background-color:#aaaadd;
}
</style>
</head>
<body>
<header>
header
</header>
<div class="ClearAll"></div>
<div class="container2">
container2
</div>
<div class="ClearAll"></div>
<div class="container3">
<div class="subcontainer1">
subcontainer1
</div>
<div class="subcontainer2">
subcontainer2
</div>
</div>
<div class="ClearAll"></div>
<div class="container4">
container4
</div>
</body>
</html>
我需要提到我在这里写的前两个 div 的宽度像素值。
第三个容器具有宽度的百分比值。第四个容器应该占据其他三个 div 留下的剩余空间（屏幕大小）。我怎样才能做到这一点 ？
你不能使用 CSS 来做到这一点。你可以做一些黑客来达到相同的效果，这取决于你想要做什么，但你并没有真正提到why你需要这样做。
对于复杂的布局，旨在fill up无论如何，如果你想看一下，有一个名为 masonry 的非常智能的 jquery 插件可以帮助你。
http://desandro.com/resources/jquery-masonry/ http://desandro.com/resources/jquery-masonry/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
