Jos*_*hua 29 html css html5 css3
我需要使我的网页高度适合屏幕大小的高度而不滚动.
HTML
<body>
<form id="form1" runat="server">
<div id="main">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</form>
</body>
CSS
#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;}
#footer{width:100%;background-color:#666666;height:200px;}
Cla*_*dix 27
一个快速,非优雅但工作独立的解决方案,内联CSS,没有jQuery要求.AFAIK也适用于IE9.
<body style="overflow:hidden; margin:0">
<form id="form1" runat="server">
<div id="main" style="background-color:red">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</form>
<script language="javascript">
function autoResizeDiv()
{
document.getElementById('main').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
</script>
</body>
Fau*_*ust 23
固定定位将满足您的需求:
#main
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
dav*_*aya 17
正如这里描述的另一个人,你需要做的就是添加
height: 100vh;
到你需要填充屏幕的任何风格
不要给出确切的高度，而是给出相对的高度，加起来为 100%。例如：
#content {height: 80%;}
#footer {height: 20%;}
加入
html, body {height: 100%;}