我已经尝试了(感觉上)数百种不同的HTML元素和body元素的高度选项,但没有任何效果。如下图所示,这是我最接近body元素跨越整个页面高度的情况。
一些事情:
- 我有一个固定的背景图片,它确实覆盖了整个页面。我不确定这是否与我遇到的问题有关。 - HTML元素的大小与下图中突出显示的body元素相同 - 我已经尝试将body和HTML的min-height和height属性设置为100%以及100vh和120vh。 - body和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;
}
正文包含两个div,#side和#header-and-content。我不确定flexbox是否与此有关...附加的CSS在附图右下角可以看到,用于设置正文元素的背景图片。如果有其他相关代码需要发布,请告诉我!谢谢!:)
编辑:HTML分布在几个不同的文件中,因此这里是浏览器的屏幕截图(是的,我可能不需要对我的文件路径进行审查,但我在工作中使用服务器,并且我一直很担心)。
因为时间紧迫,以下是相关CSS的截图:
更新:对我起作用的唯一方法是将所有内容注释掉,逐个添加元素和样式...甚至无法告诉您最终问题是什么。