无法让 <body> 元素覆盖整个页面
这里的目标是让侧边栏覆盖页面的整个高度。现在 #side 根本没有设置 height 属性，它确实根据需要跨越了整个 body 元素（当我将 height 设置为 100% 时，它没有跨越整个 body 元素......去图）。所以问题似乎是#side 的父元素body 没有跨越整个页面。
我已经为 HTML 元素和 body 元素尝试过（感觉像是）一百万种不同的高度选项，但没有任何效果。如下图所示，这与跨越整个页面高度的 body 元素非常接近。
几件事：
- 我有一个固定的背景图像，它确实覆盖了整个页面。我不确定这是否与我遇到的问题有关。
- HTML 元素与下图中突出显示的 body 元素大小相同
- 我尝试将 body 和 HTML 的 min-height 和 height 属性设置为 100% 以及 100vh 和 120vh。
- 正文和 HTML 都没有任何边距或填充。
- 我发现发布了类似的问题，但没有一个解决方案可以解决我的问题。
这是我目前所拥有的：
html, body {
margin: 0;
padding: 0;
min-height: 100%;
/* I have also tried height: 100%; */
}
body {
display: flex;
}
#side, #header-content {
/* no specified height because I found it somehow made the divs shorter? */
display: flex;
}
Body 包含两个 div，#side 和 #header-and-content。我不确定 flexbox 是否与它有任何关系......可以在附加图像的右下角看到我设置 body 元素背景图像的附加 CSS。如果我应该发布任何其他相关代码，请告诉我！谢谢！:)
编辑：HTML 跨越几个不同的文件，所以这里是浏览器的屏幕截图（是的，我可能不需要审查我的文件路径，但我在工作的服务器上，我永远是偏执的哦）
这是屏幕截图中的所有相关 CSS，因为我很着急：
更新：唯一对我有用的是评论所有内容并一个一个地添加元素和样式......甚至无法告诉你最终的问题是什么。
小智 3
通过将其 margin 和 padding 属性值设置为 0 并将 height 属性值设置为 100vh 来设置 Body 元素的样式。
body{
height: 100vh;
margin: 0;
padding 0;
}
最后将 Body-Tag 的样式设置为height100vh，以这种方式设置视口的大小
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
不要应用通用选择器 (*)。这样做将导致选择与主体具有相同属性值的其他元素，这将完全搞乱您的代码。
| 归档时间： |
|
| 查看次数： |
1153 次 |
| 最近记录： |