Question

这是页面的结构。

enter image description here

header，menu和footer的高度已知（固定并按像素设置），但body高度不是。但我希望它的高度足以让网站完全覆盖屏幕。我的意思是我需要为min-height设置一个body，使页面适合屏幕。我怎么能这样做？

Answer 1

找到它。我应该将网站包装器DIV的显示设置为table，并将其高度设置为100%，并且每个第一级DIV显示必须为table-row。

Answer 2

现在有几种方法可以使用flex-box或calc（） - 但我觉得你现在不打算走这条路。这是最好的选择。

这个概念是除了页脚之外，你有一个主容器。你强制这是100％的页面，但他们的页脚不在首页。要纠正这个问题，你可以在主容器上做一个负余量，但那也有它自己的问题 - 所以你添加这个匹配页脚高度的缓冲区div - （以及主容器的负边距）这允许页面填充页脚，但如果页面较长，请轻轻向下推页脚。

有些人会说这太“黑客”，而且这些人似乎并没有长时间留在这个行业。当然，你的主题将有大量的风格可能与此冲突或混乱 - 所以要注意那些，并真正了解正在发生的事情 - 所以你可以调整冲突。这在理论上很简单，但是任何曾经建立过网站的人都在解决这个问题。 Flex-box提供了一个非常简单的解决方案，但由于跨浏览器兼容性，在本文发布时很难实现。

这是一个只有最基本代码的jsFiddle。

以下是CodePen，其中包含更广泛的示例

HTML

<div class="container master-container">

    <header class="container global-header">
        header
    </header>

    <nav class="container global-nav">
        <ul class="menu">
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
    </nav>

    <section class="container main-content">
        main-content
    </section>

    <div class="container footer-buffer"><!-- empty --></div>    
</div>

<footer class="container global-footer">
    footer
</footer>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/* 
Read about it...
http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */



html, body {
    height: 100%; /* let them know they can be this tall if they want - because they don't already know for some reason... */
}

body {
    margin: 0;
}

.master-container {
    min-height: 100%; /* force height of html and body */
    margin-bottom: -79px; /* opposite of footer buffer! */
}

.container { /* what is common to all the big blocks */
    width: 100%;
    float: left;
}

.global-header {
    height: 91px;
    background: lightblue;
}

.global-nav .menu {
    list-style: none;
    margin: 0; padding: 0;
}

.menu li {
    float: left;
    margin-right: 1em;
}

.main-content {
    /* ? */
}

.global-footer, .footer-buffer {
    height: 79px; 
}

.global-footer {
    background: pink;
}

Answer 3

你需要吗？

已更新：http://jsfiddle.net/RQFg3/2/

将body（html）的父元素设置为高度100％和body。

CSS

* {
padding:0;
border:0;
margin:0;
}
html, body {
    height:100%;
    width:100%;
}
body {
    border:1px solid red;
}

Answer 4

通过onload使用以下内容：

//You will need to define the header height, footer height and menu height as vars:
function bodyHeight() {
    var headerHeight, footerHeight, menuHeight;
    var scr = screen.availHeight;
    var setBodyHeight = scr - (headerHeight + footerHeight + menuHeight);
    document.body.style.height = setBodyHeight + 'px';
}

Answer 5

有一个更好的方法，但这是一个快速而肮脏的例子： http://cdpn.io/uzbdg

如何设置DIV以使页面垂直适合屏幕？

5 个答案:

HTML

CSS