Html 如何使网页高度适合屏幕高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11868474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the web page height to fit screen height
提问by Joshua
I need to make my web page height to fit the height of the screen size without scrolling.
我需要使我的网页高度适合屏幕尺寸的高度而无需滚动。
HTML
HTML
<body>
<form id="form1" runat="server">
<div id="main">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</form>
</body>
CSS
CSS
#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;}
#footer{width:100%;background-color:#666666;height:200px;}
采纳答案by Claudix
A quick, non-elegant but working standalone solution with inline CSS and no jQuery requirements. AFAIK it works from IE9 too.
一个快速、不优雅但工作独立的解决方案，带有内联 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>
回答by Faust
Fixed positioning will do what you need:
固定定位将满足您的需求：
#main
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
回答by davidchuyaya
回答by Bakabaka
Don't give exact heights, but relative ones, adding up to 100%. For example:
不要给出确切的高度，而是给出相对的高度，加起来为 100%。例如：
#content {height: 80%;}
#footer {height: 20%;}
Add in
加入
html, body {height: 100%;}
回答by ram
you can use css to set the body tag to these settings:
您可以使用 css 将 body 标记设置为以下设置：
body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
回答by Gordon Bailey
Try:
尝试：
#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;}
#footer{width:100%;background-color:#666666;height:22%;}
(77% and 22% roughly preserves the proportions of contentand footerand should not cause scrolling)
（77% 和 22% 大致保留了content和的比例，footer不应该引起滚动）
