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

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

此侧边栏css的代码为：

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

您可以看到高度为100%，在过去它一直延伸，但现在侧边栏没有清晰到达的地方出现了一些白色（查看左下角的图像）。我觉得这个问题是从我在右侧添加了一个

div

作为子标题开始的，正如您现在在图像中看到的，它显示了“示例目录项”。此“示例目录项”

div

下面的内容部分是my 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%

是否意味着即使在另一侧有更多的

div

s，它也会一直延伸下去？

请参见下面的注释以获得澄清

旧答案： 尝试将主体高度也指定为100%，如下所示：

.body {
  height: 100%;
}

---

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

我也遇到了同样的问题，这是因为“高度”值与滚动条不匹配

一个可行的解决方案是使用“位置”而不是“浮动”

---

这应该是可行的…

发生的事情是，您的

子标题的高度被添加到
内容中，因此它们一起成为其父项的100%以上

一种解决方案是给
子标题
一个固定的高度，然后从
内容中减去该高度，因此如果您用该值更新这两条规则

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

.sub_header {
    height: 70px;
}

样品


@导入url（“https://fonts.googleapis.com/css?family=Open+Sans”）；
/*一般的*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
a{
文字装饰：无；
}
html，正文{
身高：100%；
字体系列：“开放式Sans”，无衬线；
}
#标题{
宽度：100%；
高度：75px；
背景色：#34495e；
保证金：0自动；
}
.标志{
浮动：左；
边缘顶部：5px；
左边距：15px；
填充顶部：6px；
颜色：#ffffff；
}
.标志a{
字号：1.9em；
颜色：#ffffff；
}
#容器{
宽度：100%；
身高：100%；
保证金：0自动；
}
.侧边栏{
宽度：220px；
身高：100%；
背景色：#262626；
浮动：左；
左侧填充：0px；
填充顶部：0px；
颜色：#ffffff；
}
保险商实验室{
}
#侧边栏李{
列表样式：无；
}
#侧边栏LIA{
颜色：#CCCC；/*灰色*/
显示：block；/*大多数元素的默认值，但在本例中为替代*/
填充：15px；
字号：1em；
边框底部：1px实心#000000；
-webkit转换：0.3s；
-moz跃迁：0.3s；
转换：0.4s；/*但会影响延迟*/
}
#侧边栏li a:悬停{
颜色：#ffffff；
背景色：#030303；
左填充：25px；/*在悬停时移动侧栏元素*/
}
.内容{
左边距：220px；/*与侧栏相同，用于将内容带到正确位置*/
高度：计算（100%-70px）；
背景颜色：#030303；
/*然后添加填充*/
填充：15px；
/*填充顶部：15px*/
字体大小：1.1米；
背景色：#bdc3c7；
}
/*子页*/
.sub_标题{
字体大小：1.7em；
左边距：220px；
填充：15px；
背景色：#7f8c8d；
高度：70像素；
}
#联系方式{
左边距：220px；
字号：1em；
}







样本目录项目
目录项
由于我看不到html，我将建议一些可能存在问题的事情：

如果
.sub_标题
不在
.content
内，则它们的总和都大于身体高度的100%。这就是为什么这两个元素的总数要比侧边栏大

如果您事先知道希望元素分布在整个屏幕上，那么最好使用
100vh
而不是
100%
。（100vh=视口高度的100*1%）

确保在元素上设置
框大小：边框框
，以便获得预期的大小。大多数人倾向于以
框大小：边框框
的方式思考，而不是默认行为。一篇小文章解释了
框大小：边框框

这里有一个小例子：


*{
框大小：边框框；
}
.侧边栏{
宽度：220px；
高度：100vh；
背景色：#262626；
浮动：左；
左侧填充：0px；
填充顶部：0px；
颜色：#ffffff；
}
.内容{
宽度：自动；
左边距：220px；
高度：100vh；
填充：15px；
字体大小：1.1米；
背景色：#bdc3c7；
}
.sub_标题{
字体大小：1.7em；
填充：15px；
背景色：#7f8c8d；
}
。侧栏
.sub_标题
.内容
你能做一把小提琴吗？我们不能像这样猜测你的html结构？当我在那里运行它时，很难判断是否有白色突出，因为窗口太小。你想在页面溢出或所有页面溢出时滚动内容吗。。。另外，发布你的标记嗯，我希望内容不要全部显示在一个页面上，如果它们是多个页面，则在向下滚动时显示。但我希望侧边栏一直延伸到底部，不管有多少“内容”，左侧的侧边栏都应该一直延伸到底部。我看到一些人告诉我把“.sub_头”放在“.content”中，或者他们的高度被添加了，而不是与侧栏的高度100%相同：100%。这仍然不能解决问题。文学硕士
.content {
    height: calc(100% - 70px);
}

.sub_header {
    height: 70px;
}