如何使网页高度适合屏幕高度

小编典典

如何使网页高度适合屏幕高度

css

我需要使我的网页高度适合屏幕尺寸的高度，而无需滚动。

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;}

阅读 353

2020-05-16

共1个答案

小编典典

一个快速，简洁，有效的独立解决方案，带有内联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>

2020-05-16