当高度 = 100% 时，div 的 CSS / HTML 背景颜色没有到达页面底部？

Question

无论您如何调整页面大小，我正在尝试制作的网站的侧边栏都应该到达页面底部，并且它工作了一周直到现在由于某种原因左下角突出像这样：image of problem.

这个侧边栏css的代码是：

.sidebar {
    width: 220px;
    height: 100%;
    background-color: #262626;
    float: left;
    padding-left: 0px;
    padding-top: 0px;
    color: #ffffff;
}

您可以看到高度为 100%，并且在过去一直延伸，但现在边栏没有清晰到达的地方有一些白色（检查图像，左下角）。当我在右侧添加一个div 作为子标题时，我觉得这个问题开始了，正如您现在在图像中看到的那样，它显示“示例目录项”。此“示例目录项”div 下方的内容部分在我的 css 中命名为内容，代码还将其高度设置为 100%：

.content {
    width: auto;
    margin-left: 220px; /* same as side bar to bring content to the right place */
    height: 100%;
    backgrouond-color: #030303;
    /* then add padding */
    padding: 15px;
    font-size: 1.1em;
    background-color: #bdc3c7;
}

前面提到的div的css代码是：

.sub_header {
    font-size: 1.7em;
    margin-left: 220px;
    padding: 15px;
    background-color: #7f8c8d;

}

我觉得这个div 让.sidebar 突出在.content 旁边，我尝试了很多方法来查找和修复它，但我无法弄清楚。 height: 100% 不是意味着即使另一边有更多divs 也会一直延伸吗？

Answer 1

由于我看不到 html，我会建议一些可能有问题的事情：

1. 如果.sub_header 不在.content 内，则它们的总和都大于身体高度的100%。这就是为什么这两个元素的总和大于侧边栏的原因。

2. 如果您事先知道您希望元素遍布整个屏幕，则使用100vh 而不是100% 可能会更好。 （100vh = 100 * 视口高度的 1%）

3. 确保在元素上设置box-sizing: border-box，以便获得所需的大小。大多数人倾向于以box-sizing: border-box 工作的方式思考，而不是默认行为。 Here's 一篇解释box-sizing: border-box 的小文章。

这是一个小例子：

* {
  box-sizing: border-box;
}

.sidebar {
  width: 220px;
  height: 100vh;
  background-color: #262626;
  float: left;
  padding-left: 0px;
  padding-top: 0px;
  color: #ffffff;
}

.content {
  width: auto;
  margin-left: 220px;
  height: 100vh;
  padding: 15px;
  font-size: 1.1em;
  background-color: #bdc3c7;
}

.sub_header {
  font-size: 1.7em;
  padding: 15px;
  background-color: #7f8c8d;
}

<div class="sidebar">.sidebar</div>
<div class="content">
  <div class="sub_header">.sub_header</div>
  .content
</div>

Answer 2

请参阅下面的 cmets 了解详情。

旧答案： 尝试将 body 的高度指定为 100%，如下所示：

.body {
  height: 100%;
}

确保将其放在侧边栏部分上方。

Answer 3

当您的sub_header 的高度被添加到content 的高度时，会发生什么情况，因此它们加起来超过其父级的 100%。

一种解决方案是给sub_header 一个固定的高度并从content 中减去它，所以如果你用这个更新这两条规则

.content {
    height: calc(100% - 70px);
}

.sub_header {
    height: 70px;
}

样本

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* general */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

html, body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
}

#header {
    width: 100%;
    height: 75px;
    background-color: #34495e;
    margin: 0 auto;
}
.logo {
    float: left;
    margin-top: 5px;
    margin-left: 15px;
    padding-top: 6px;
    color: #ffffff;
}
.logo a {
    font-size: 1.9em;
    color: #ffffff;

}

#container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.sidebar {
    width: 220px;
    height: 100%;
    background-color: #262626;
    float: left;
    padding-left: 0px;
    padding-top: 0px;
    color: #ffffff;
}

ul {

}
#sidebar li {
    list-style: none;

}
#sidebar li a {
    color: #cccccc; /* grey */
    display: block; /* default for most elements, but overrides in this case */
    padding: 15px;
    font-size: 1em;
    border-bottom: 1px solid #000000;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.4s; /* however effects delay */
}
#sidebar li a:hover {
    color: #ffffff;
    background-color: #030303;
    padding-left: 25px; /* shifts sidebar elements on hover */
}


.content {
    margin-left: 220px; /* same as side bar to bring content to the right place */
    height: calc(100% - 70px);
    backgrouond-color: #030303;
    /* then add padding */
    padding: 15px;
    /* padding-top: 15px; */
    font-size: 1.1em;
    background-color: #bdc3c7;
}


/* sub pages */

.sub_header {
    font-size: 1.7em;
    margin-left: 220px;
    padding: 15px;
    background-color: #7f8c8d;
    height: 70px;
}
#contact_info {
    margin-left: 220px;
    font-size: 1em;
}

<div id="header">
    <div class="logo"> <!-- Logo of Website -->
        <a href="#">Everyshine Impex Limited<span> <!-- Source --></span></a> <!-- Span for endline element -->
    </div>

</div>

<div id="container">
    <!-- 245px for menu bar -->
    <div class="sidebar">
        <ul id="sidebar">
            <li><a class="selected" href="index.html">Home</a></li>
            <li><a href="about us.html">About Us</a></li>
            <li><a href="catalog items.html">Catalog Items</a></li>
            <li><a href="contact.html">Contact Information</a></li>

        </ul>

    </div>

    <div class="sub_header">
    Sample Catalog Items
    </div>

    <div class="content">
        Catalog Items

    </div>

</div>

---

上面的缺点是在较小的屏幕上，sub_header 文本可能不适合并且看起来很奇怪。为了解决这个问题，您可以使用媒体查询，但更聪明的方法是使用flexbox，因此在sub_header/content 周围的标记中添加wrapper，如下所示，

<div class="wrapper">        
  <div class="sub_header">
    Sample Catalog Items
  </div>

  <div class="content">
    Catalog Items
  </div>
</div>

并像这样添加/更新这些规则

.wrapper {
    margin-left: 220px; /* same as side bar to bring content to the right place */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    background-color: #030303;
    padding: 15px;
    font-size: 1.1em;
    background-color: #bdc3c7;
}


/* sub pages */

.sub_header {
    font-size: 1.7em;
    padding: 15px;
    background-color: #7f8c8d;
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* general */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

html, body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
}

#header {
    width: 100%;
    height: 75px;
    background-color: #34495e;
    margin: 0 auto;
}
.logo {
    float: left;
    margin-top: 5px;
    margin-left: 15px;
    padding-top: 6px;
    color: #ffffff;
}
.logo a {
    font-size: 1.9em;
    color: #ffffff;

}

#container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.sidebar {
    width: 220px;
    height: 100%;
    background-color: #262626;
    float: left;
    padding-left: 0px;
    padding-top: 0px;
    color: #ffffff;
}

ul {

}
#sidebar li {
    list-style: none;

}
#sidebar li a {
    color: #cccccc; /* grey */
    display: block; /* default for most elements, but overrides in this case */
    padding: 15px;
    font-size: 1em;
    border-bottom: 1px solid #000000;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.4s; /* however effects delay */
}
#sidebar li a:hover {
    color: #ffffff;
    background-color: #030303;
    padding-left: 25px; /* shifts sidebar elements on hover */
}

.wrapper {
    margin-left: 220px; /* same as side bar to bring content to the right place */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    background-color: #030303;
    padding: 15px;
    font-size: 1.1em;
    background-color: #bdc3c7;
}


/* sub pages */

.sub_header {
    font-size: 1.7em;
    padding: 15px;
    background-color: #7f8c8d;
}
#contact_info {
    margin-left: 220px;
    font-size: 1em;
}

<div id="header">
    <div class="logo"> <!-- Logo of Website -->
        <a href="#">Everyshine Impex Limited<span> <!-- Source --></span></a> <!-- Span for endline element -->
    </div>

</div>

<div id="container">
    <!-- 245px for menu bar -->
    <div class="sidebar">
        <ul id="sidebar">
            <li><a class="selected" href="index.html">Home</a></li>
            <li><a href="about us.html">About Us</a></li>
            <li><a href="catalog items.html">Catalog Items</a></li>
            <li><a href="contact.html">Contact Information</a></li>

        </ul>

    </div>

    <div class="wrapper">
    
      <div class="sub_header">
        Sample Catalog Items
      </div>

      <div class="content">
        Catalog Items

      </div>
    </div>

</div>

---

注意，对于基于元素的百分比高度，所有父级，一直到html/body 都需要一个高度，在你的情况下，这个更新就足够了

html, body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
}

---

另一个观察结果是您在logo 和sidebar 上使用float。使用浮点数时，有时需要清除它们，否则它们可能会在以后/如果您向其父级添加更多元素时引起问题。

如果发生这种情况，您可以根据现有标记清除它们

#header::after,
#container::after {
    content: '';
    display: block;
    clear: both;
}

Answer 4

我也遇到了同样的问题，这是因为高度值不适应滚动。

一种可能的解决方案是使用“位置”而不是“浮动”...

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background-color: #262626;
    padding-left: 0px;
    padding-top: 0px;
    color: #ffffff;
}

.content {
    position: absolute; 
    width: auto;
    left: 220px;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #030303;
    /* then add padding */
    padding: 15px;
    font-size: 1.1em;
    background-color: #bdc3c7;
}

这应该可以...