html - How to make the web page height to fit screen height

Question

Welcome To Ask or Share your Answers For Others

html - How to make the web page height to fit screen height

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - How to make the web page height to fit screen height

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T23:59:32+0000

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>

Categories

html - How to make the web page height to fit screen height

html - How to make the web page height to fit screen height

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags