Css 如何指定div的高度？_Css

Css 如何指定div的高度？

css

Css 如何指定div的高度？,css,Css,我想为前两个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 xm

我想为前两个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无法做到这一点。你可以做一些黑客来达到同样的效果，这取决于你想做什么，但你没有真正提到为什么你需要这样做

如果你想看一看的话，有一个非常智能的jquery插件，名为Mashesis，可以帮助你完成复杂的布局，它可以以任何方式填满屏幕

您可以使用以下JQuery脚本：

function resizeContainer() {
    var screenHeight = $(window).height();
    var allElements = $('header').height() + $('.container2').height() + $('.container3').height();
    var container4Height = screenHeight - allElements;
    $('.container4').css({
        'height': container4Height
    });
}

resizeContainer();

$(window).resize(resizeContainer);

演示：

这不能在CSS中完成，而且看起来100%完美

我无法想象你想要什么。你有什么HTML开始吗？你希望结果是什么样子？什么div？我没有看到任何div！迪维斯，你好！你在哪？请发布你的密码，我们不是通灵者！那潜水舱应该怎么布置呢？你想占用的总空间是多少？屏幕高度？固定像素高度？你目前的HTML+CSS是什么？请在等待答案之前添加详细信息。这是我的代码，其中包含html+css。@mingos他在另一个问题上发布了它，我正在编辑，我想使用纯css，而不使用任何javascript或jquery。。。还有其他选择吗？没有，没有。你可以做一些黑客来达到同样的效果，但它不会使用两个div在上面和下面。谢谢你的代码。但是在javascript中我是0。我不知道如何用我的代码绑定javascript。您能帮助我吗？您需要将JQuery粘贴到以下位置，将其包括在文档的中：