Question

我的布局有一个页眉和页脚，介于内容div之间。

当我将内容高度设置为100％时，它会溢出而不是扩展div。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

.header,
.footer {
  height: 100px;
  width: 100%;
  background-color: red;
  color: white;
}

.content {
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="header">
  <h1>Heading</h1>
</div>
<div class="content">
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
</div>
<div class="footer">
  <h1>Footer
    <h1>
</div>

＆＃13;

我已经知道解决方案是摆脱100％的高度。 但我想知道的是为什么会发生这种情况。 100％的身高不应该扩大它的身高以适应父母的身高吗？

以下是我的代码的fiddle。

Answer 1

当然会溢出。

高度：100％是取父母的身高并将其作为身高。它不会占用剩余高度的剩余部分，而是采用父级的原始高度并将其设置为高度。我想这就是你想要的解释。

Answer 2

不应该100％高度扩大它的高度以适应父母的身高吗？

是的，但是溢出是因为你为父母设定了一个固定的高度，所以它不会增长。

我建议您不要将height: 100%用于html和body等主要容器，因为您希望它具有灵活性。您还希望这些容器至少是初始屏幕高度，因此请使用：

html,
body {
  min-height: 100vh;
}

如果内部有更多内容，您将拥有至少100％高度的容器，这些容器将会增长。但是您不能将height: 100%用于子容器，但由于用例通常是容器的高度等于屏幕百分比，因此您可以使用vh（视口高度）单位）实现这一点而不用担心父容器的高度。你可以创建一个这样的类：

.full-height{
    height: 100vh;
}

Answer 3

对html和内容使用min-height而不是height属性

<style>
* {
  margin: 0;
  padding: 0;
}

body,
html {
  min-height: 100%;
}

.header,
.footer {
  height: 100px;
  width: 100%;
  background-color: red;
  color: white;
}

.content {
  width: 100%;
  min-height: 100%;
}
</style>

Answer 4

只需删除height:100%。

.content {
  width: 100%;
  height: 100%;<------Remove This----------
}

完整代码：

*{
    margin: 0;
    padding: 0;
}

body, html {
   height: 100%;
}

.header, .footer {
  height: 100px;
  width: 100%;
  background-color: red;
  color: white;
}

.content {
  width: 100%;
}

<div class="header">
  <h1>Heading</h1>
</div>
<div class="content">
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
  <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque
    montesque rhoncus quis eros. Vestnunc nonummy</p>

  <span>
                Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy
            </span>
</div>
<div class="footer">
  <h1>Footer
    <h1>
</div>

当mu内容设置为100％高度时，为什么内容会溢出

4 个答案: