Question

我正在尝试获得以下布局：Link to Image

这就是我在代码中所做的事情：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
<div style="position:absolute; width: 100%; height: 100%" id="container">
     <div id='Header'>Header</div>
     <div id='Content' style='height:100%; background: gray;'>Content</div>
</div>     
</body>
</html>

但是这样内容获取浏览器窗口（父div）的高度，并将其添加到标题占用的前20个像素，导致窗口滚动（窗口的高度为20px + = =超出屏幕）。我可以使用“overflow：hidden”作为内容，但我不想给内容额外的空间。

在WPF中我可以通过添加两行Grid（Height =“Auto”和Height =“*”）来实现。也许我应该放弃并使用表格？

Answer 1

将主体的背景颜色设置为蓝色然后让内容div具有可变高度会有任何问题吗？它会达到完全相同的效果。

然后你甚至不必拥有容器div。没有必要的元素。

Answer 2

您可以将第二个div的样式更改为：

#Content {
  position: absolute;
  top: 20px;
  bottom: 0px;
  width: 100%;
}

这应该保持浏览器框架内的所有标记，而不是添加20px。

Answer 3

我有一个流体高度代码。希望这有帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>DIV layout test</title>

<style type="text/css">
body{
margin: 0;
font-family: tahoma;
font-size: 12px;
color: #645728;
}

#header{
display: block;
width: 100%;
background: #fcf1cb;
}

#middle{
display: block;
width: 100%;
border-top:none;
background: #bce5e3;
}

#footer{
display: block;
width: 100%;
border-top: none;
background: #bce5e3;
}
</style>

<script type="text/javascript">
function getWindowInnerH(){
var innerH = null;
if (typeof(window.innerHeight) == "number"){//MOZILLA, OPERA
innerH = window.innerHeight;
}else if (typeof(document.documentElement.clientHeight) == "number"){//IE 6+
innerH = document.documentElement.clientHeight;
}

return innerH;
}

function arrange(){
var headerE = document.getElementById("header");
var middleE = document.getElementById("middle");
var footerE = document.getElementById("footer");

if (!headerE || !middleE || !footerE){
return;
}

//get window's inner height
var innerH = getWindowInnerH();

//get header's and footer's height
var headerH = headerE.offsetHeight;
var footerH = footerE.offsetHeight;
//calc middle's heigth
var middleH = Math.round(innerH - (headerH + footerH));

//set header's and footer's height
headerE.style.height = headerH + "px";
footerE.style.height = footerH + "px";

//set middle's height
middleE.style.height = middleH + "px";

}

window.onresize = arrange;
</script>

</head>
<body onload="arrange()">
<div id="header">header content<br/><br/><br/><br/><br/></div>
<div id="middle">middle content</div>
<div id="footer">footer content</div>
</body>
</html>

注意：请勿移除页脚div。如果你这样做技术不会工作..

Answer 4

如您所知，设置width: 100%就像设置width: <width of the window>。

相反，您可以将内容的边缘设置为屏幕右侧，左侧和底部的0px。

您网页的CSS将如下所示：

body {
    margin: 0px;
    top: 0px;
}
#container {
    color: white;
}
#Header { 
    background-color: grey;
    padding: 6px;
}
#Content {
    position: absolute;
    top: 30px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: 0px;
    padding-top: 6px;
    padding-left: 6px;
    background-color: blue;
}

这样，页面的外观与您提供的图像相同。

Answer 5

最简单的方法是省略content-div的height:属性，并允许它扩展/收缩以适应内容。为了实现您提供的图像外观，您需要页面的body具有与content-div相同的background-property。我们的想法是Content的背景完成body的背景应该继续。

body,
Content {background-color: #00f; }

如果您使用background-images，从内存中要求body和Content都是position: absolute，这会变得有点棘手。

带有DIV的页面布局

5 个答案: