Question

我想将包装器div的宽度和高度设为100％，不包括页眉和页脚。 HTML：

<header>
    <h1>This is my heading</h1>
    </header>

    <div class="wrapper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget turpis turpis. Phasellus at urna vitae nibh hendrerit dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper quam a turpis elementum, vel feugiat nunc fermentum. Nullam semper sapien in magna lobortis, a mattis nunc viverra. Quisque rutrum, dui eget posuere rutrum, diam dolor aliquam felis, eu finibus odio augue a nibh. Curabitur venenatis fermentum diam, tristique fermentum felis tincidunt id. Donec sed venenatis neque, id sollicitudin risus. Donec eu libero non diam blandit tempor.</p>
</div>
<footer>Copyrights syntex</footer>

CSS：

body{margin:0; padding:0}
header {border-bottom:1px solid green; padding:15px}
.wrapper {border:1px solid red; background:#fafafa; margin:15px; padding:15px; border-radius:4px;}
footer{position:fixed; width:100%; text-align:center; bottom:0; border-top:1px solid #000;}

我正在寻找纯CSS解决方案。无论内容如何，包装div应覆盖除页眉和页脚之外的整个身体区域。感谢您的回复。这是jsfiddle链接： http://jsfiddle.net/eza0fnb2/1/

Answer 1

请尝试添加这部分CSS作为第一条规则：

* {box-sizing: border-box;}
html, body {height: 100%;}

然后为包装器设置一个高度，并将页眉和页脚的position设置为fixed。

小提琴：http://jsfiddle.net/eza0fnb2/3/

Answer 2

请参阅此DEMO

包装.shell中的所有元素并应用max-content以保持一切紧张。
使用.inner包装.wrapper的内容并应用100vh和overflow-y: none拉伸.wrapper以获得最大高度。
应用display: table-cell拉伸.wrapper以获得最大宽度。

box-sizing: border-box应适用于所有内容。将其应用于html，然后使每个元素和伪元素继承*, *:before, *:after { box-sizing: inherit; }。这样，如果您需要将某些内容设置为box-sizing: content-box默认值，则可以使用该选项。

这个演示的意外之处在于，如果你调整高度，它将不会重叠内容。如果您希望内容继续重叠，请设置.inner { overflow-y: hidden; }几乎忘记，页脚上的position: fixed必须去（写这篇文章时，让我意识到之前提到的重叠部分）。

CSS

    /* Styles go here */
html { box-sizing: border-box; height: 100%; }
*, *:before, *:after { box-sizing: inherit; }
body{margin:0; padding:0; height: 100%; }
.shell { max-width: -moz-max-content; max-width: -webkit-max-content; max-width: max-content; }
header {border-bottom:1px solid green; padding:15px}
.wrapper {border:1px solid red; background:#fafafa; margin:15px; padding:15px; border-radius:4px; display: table-cell; }
.inner { display: block; height: 100vh; overflow-y: none; }
footer{ width:100%; text-align:center; bottom:0; border-top:1px solid #000;}

HTML

<section class="shell">
<header>
    <h1>This is my heading</h1>
    </header>

    <div class="wrapper">
        <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget turpis turpis. Phasellus at urna vitae nibh hendrerit dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper quam a turpis elementum, vel feugiat nunc fermentum. Nullam semper sapien in magna lobortis, a mattis nunc viverra. Quisque rutrum, dui eget posuere rutrum, diam dolor aliquam felis, eu finibus odio augue a nibh. Curabitur venenatis fermentum diam, tristique fermentum felis tincidunt id. Donec sed venenatis neque, id sollicitudin risus. Donec eu libero non diam blandit tempor.</p>
        </div>
</div>
<footer>Copyrights syntex</footer>
</section>

设置div 100％宽度和高度100％的问题

2 个答案:

CSS

HTML