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

Question

我正在尝试制作的网站的侧边栏应该到达页面底部，无论您如何调整页面大小，它工作了一个星期，直到现在由于某种原因 bottom-left 是这样戳出来的：image of problem.

此边栏的代码 css 是：

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

你可以看到高度是100%，过去一直延伸但现在侧边栏没有清楚地到达的地方有一些白色（检查图像，左下角）。当我在右侧添加一个 div 作为 sub-header 时，我觉得这个问题开始了，正如您在图像中看到的那样，它现在显示为 "Sample Catalog Items"。 "Sample Catalog Items" div 下面的内容部分在我的 css 中命名为 content 并且代码还将其高度设置为 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% 不是说即使另一边有更多 div 也会一直延伸吗？

Answer 1

请参阅下面的评论以进行说明。

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

.body {
  height: 100%;
}

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

Answer 2

我遇到了同样的问题，这是因为高度值不随滚动动态调整。

一个可能的解决方案是使用 "position" 而不是 "float"...

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

这应该有效...

Answer 3

发生的事情是，你的 sub_header 的身高被加到 content 的身高上，因此他们的身高加起来超过了 parent 的 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>

和add/update这些规则是这样的

.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>

请注意，对于基于百分比的元素高度，所有 parent 一直到 html/body 都需要一个高度，在您的情况下，此更新将够了

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

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

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

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

Answer 4

因为我看不到 html，我会提出一些可能有问题的建议：

如果.sub_header不在.content里面，它们加起来的高度都大于身高的100%。这就是为什么这两个元素的总和比侧边栏大。
如果您事先知道您希望元素遍布整个屏幕，使用 100vh 可能比 100% 更好。（100vh = 100 * 视口高度的 1%）
请确保您在元素上设置了 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>

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

CSS / HTML Background color for a div not reaching bottom of page when height = 100%?

html

css

navigationbar