发表新帖
发表新帖

How to make the web page height to fit screen height

前端 未结
关注
6 1996
小蘑菇
小蘑菇 2020-11-30 06:50

I need to make my web page height to fit the height of the screen size without scrolling.

HTML
相关标签:
6条回答
  • 挽巷
    2020-11-30 06:54

    you can use css to set the body tag to these settings:

    body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
    0 讨论(0)
  • 北荒
    2020-11-30 07:02

    Fixed positioning will do what you need:

    #main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
    0 讨论(0)
  • 陌清茗
    2020-11-30 07:04

    Don't give exact heights, but relative ones, adding up to 100%. For example:

      #content {height: 80%;}
  #footer {height: 20%;}

    Add in

     html, body {height: 100%;}
    0 讨论(0)
  • 长情又很酷
    2020-11-30 07:11

    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 content and footer and should not cause scrolling)

    0 讨论(0)
  • 太阳男子
    2020-11-30 07:12

    As another guy described here, all you need to do is add

    height: 100vh;

    to the style of whatever you need to fill the screen

    0 讨论(0)
  • 情书的邮戳
    2020-11-30 07:21

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题