Question

我需要让我的网页高度适应屏幕尺寸的高度，而不需要滚动。

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

Answer 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>

Answer 2

固定定位将满足您的需求：

#main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

Answer 3

正如另一个人所描述的here，您需要做的就是添加

height: 100vh;

到你需要填充屏幕的任何风格

Answer 4

不要给出确切的高度，而是相对高度，加起来高达100％。例如：

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

加入

 html, body {height: 100%;}

Answer 5

尝试：

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;}
#footer{width:100%;background-color:#666666;height:22%;}

（77％和22％大致保留content和footer的比例，不应导致滚动）

Answer 6

您可以使用css将body标签设置为以下设置：

body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}

Answer 7

使用这个，用你自己的班级“家”替换

(function ($) {
    $(function(){"use strict";
        $('.home').css({'height':($(window).height())+'px'});
        $(window).resize(function(){
        $('.home').css({'height':($(window).height())+'px'});
        });
    });
  
  })(jQuery);

Answer 8

确保通过添加重要内容来覆盖原始样式。

height: 100vh !important;

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

8 个答案: