31

我需要使我的网页高度适合屏幕大小的高度而不滚动。

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

8 回答 8

29

一个快速、不优雅但独立工作的解决方案，带有内联 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>
于 2012-08-08T16:10:47.473 回答
26

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

#main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
于 2012-08-08T16:00:22.287 回答
24

正如另一个人在这里描述的那样，您需要做的就是添加

height: 100vh;

填充屏幕所需的任何样式

于 2015-08-30T02:23:50.967 回答
5

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

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

加入

 html, body {height: 100%;}
于 2012-08-08T16:02:26.587 回答
0

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

body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
于 2012-08-08T16:05:56.790 回答
0

尝试：

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

（77% 和 22% 大致保留了比例content并且footer不应该引起滚动）

于 2012-08-08T16:01:01.423 回答
0

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

(function ($) {
    $(function(){"use strict";
        $('.home').css({'height':($(window).height())+'px'});
        $(window).resize(function(){
        $('.home').css({'height':($(window).height())+'px'});
        });
    });
  
  })(jQuery);
于 2021-03-25T09:38:01.930 回答
0

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

height: 100vh !important;
于 2021-04-20T15:03:14.497 回答