代码之家 › 专栏 › 技术社区 › Anvaka

带div的页面布局

html layout css

Anvaka · 技术社区 · 17 年前

这就是我在代码中所做的:

<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中,我可以通过添加一个包含两行(Height=“Auto”和Height=“*”)的网格来实现这一点。也许我应该放弃使用桌子?

5 回复 | 直到 17 年前

Joseph Mansfield 17 年前

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

这样您就不必使用container div了。没有必要使用不必要的元素。

mishac 17 年前

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

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

这应该使Everything保持在浏览器框架内,而不是添加20px。

Logesh Paul 17 年前

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

<!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>

Carmine Paolino 17 年前

width: 100% ,如你所知,将像设置 width: <width of the window> .

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

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

David Thomas 17 年前

height: 属性,并允许其展开/收缩以适应内容。为了实现您提供的图像的外观,您需要 body 页面的背景属性与content-div相同 Content 完成的背景应该继续。

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

如果您使用 background-images ,规定和 内容 position: absolute ,来自记忆。