当高度= 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作为子标题时，我觉得这个问题已经开始了，正如您现在可以在图像中看到的那样显示＆＃34;样本目录项＆＃34;。此内容部分＆＃34;样本目录项目＆＃34; 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旁边，我已经尝试了很多方法来查看并修复它但我可以＆＃ 39;弄清楚。没有height: 100%意味着它会一直延伸，即使另一边有更多div s吗？

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的文章。

这是一个小例子：

＆＃13;
＆＃13;
* {
  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;
}
＆＃13;
<div class="sidebar">.sidebar</div>
<div class="content">
  <div class="sub_header">.sub_header</div>
  .content
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

请参阅以下评论以获得澄清。

旧答案： 尝试将身体的高度指定为100％，如下所示：

.body {
  height: 100%;
}

请务必将其放在侧边栏部分上方。

Answer 3

当sub_header的{​​{1}}高度被添加到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，因此在wrapper / sub_header周围的标记中添加content此，

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

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

如果发生这种情况，可以根据现有标记

清除它们

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

Answer 4

我遇到了同样的问题，因为身高值并没有与滚动动态相符。

一个有效的解决方案是使用＆＃34; position＆＃34;而不是＆＃34;浮动＆＃34; ...

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

这应该有用......