使用 DIV 的页面布局答案

【问题标题】：Page layout with DIVs使用 DIV 的页面布局
【发布时间】：2009-08-14 09:04:43
【问题描述】：

我正在尝试获得以下布局：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 + 窗口高度 == 超出屏幕）。我可以对内容使用“溢出：隐藏”，但我不想给内容额外的空间。

在 WPF 中，我可以通过添加一个包含两行（Height="Auto" 和 Height="*"）的 Grid 来做到这一点。也许我应该放弃并使用表格？

【问题讨论】：

标签： css layout html

【解决方案1】：

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

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

您页面的 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;
}

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

【讨论】：

谢谢！这正是我所需要的！
嘿，不幸的是，这个解决方案在“浏览器”中不起作用。（当然是 IE 6）

【解决方案2】：

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

那么您甚至不必拥有容器 div。没有必要的元素没有意义。

【讨论】：

不能这样做。在内容 div 中，我可以有一个 iframe，它应该垂直拉伸到容器的底部，而不是更多。

【解决方案3】：

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

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

这应该将所有内容保留在浏览器框架内，而不是添加 20px。

【讨论】：

【解决方案4】：

我有一个流动的高度代码。希望这会有所帮助。

<!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。如果你这样做，这项技术将不起作用..

【讨论】：

【解决方案5】：

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

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

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

【讨论】：