如何使网页高度适合屏幕高度 [英] How to make the web page height to fit screen height
本文介绍了如何使网页高度适合屏幕高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要让我的网页高度适合屏幕大小的高度而不滚动。
HTML
< body>
< form id =form1runat =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;}/ pre>
#footer {width：100％; background-color：＃666666; height：200px;}
解决方案一个快速，非优雅但是工作独立的解决方案与内联CSS和没有jQuery的要求。
< body style =overflow：hidden; margin：0>
< form id =form1runat =server>
< div id =mainstyle =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>
I need to make my web page height to fit the height of the screen size without scrolling.
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;}
解决方案A quick, non-elegant but working standalone solution with inline CSS and no jQuery requirements. AFAIK it works from IE9 too.
<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>
这篇关于如何使网页高度适合屏幕高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
