我遇到了一个巨大的问题,使我的母版页布局扩展到100%的浏览器窗口高度。宽度没有问题。我尝试了许多不同的解决方案,但都不起作用。
这就是我到目前为止所拥有的。我设法将html和body扩展到高度:100%,但div#container给我带来了问题。。。它不会膨胀到100%的高度。出于测试目的,我将borders放在html、body和container附近,看看哪一个不起作用。任何帮助都已通知。我正在VS2010中设计我的网络应用程序,并使用Chrome(也在IE和Mozilla中进行了测试,但没有成功)。
html:
<!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">
<head runat="server">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="headercontent">
HEADER
</div>
<div id="leftcontent">
<p>LEFT CONTENT</p>
<p>MENU</p>
<p>MENU</p>
<p>MENU</p>
</div>
<div id="rightcontent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footercontent">
FOOTER
</div>
</div>
</form>
</body>
</html>
还有我的样式表.css
body{
font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
background: yellow;
}
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid red;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid blue;
}
#container{
width: 100%;
height: 100%;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
#headercontent{
height: 70px;
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
#leftcontent{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
}
#rightcontent{
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
#footercontent{
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
您的身体元素在设置时是100%的高度,但您没有将内容设置为任何位置,因此它们遵循正常的流程,就像一堆盒子一样。您也没有足够的内容来填充屏幕。如果你想让页脚粘在底部,可以在SO或谷歌上搜索"粘性页脚"。
如果你想让一些内容进一步延伸,你就必须增加一些高度。
只需执行以下操作:
将html和body设置为height: 100%;
:
html,
body {
height: 100%;
}
下一步:用一个容器包裹你的表格,并将其弯曲到100%的最小高度:
#wrapper {
min-height: 100%;
}
这在IE6中不起作用。因此添加了一个小破解:
* html #wrapper {
height: 100%;
}
#container
元素嵌套在<form>
标记中,因此即使将#container
的高度设置为100%,也会将其高度设置为其父元素(即<form>
标记)的100%。
尝试移动#container <div>
标签,使其位于<form>
标签之外,如下所示:http://jsfiddle.net/ianoxley/E4zAm/
如果你能忍受使用position:absolute的div#容器,你可以使用这个小技巧:
#container{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
将所有四个布局属性(上/右/下/左)设置为所需的值将导致元素拉伸以适应这些值。