html - 具有适当部分的全屏布局

Question

肯定有多种方法可以让 div 覆盖整个屏幕并在其背景中显示全屏图像，但大多数方法都会采用 min-height:100% 和 background -size: cover 属性，它会做的是，如果放置了其他部分，如页脚/页眉，它通常会“漂浮”在全屏 div 之上。

像这样

左图是目前大多数解决方案所做的。正确的是理想情况下应该是好的。

一种解决方案是使用vh 单位。

任何其他可以支持大多数浏览器的纯 CSS 方法？

谢谢。
PS - 抱歉，我不能优雅地把它告诉你。

Answer 1

使用 90% 而不是 100% 最小高度有什么问题？看看我的代码:

body, html {
    height:100%;
    padding: 0;
    margin: 0;
    text-align: center;
    color:#FFF
}

.fullsection {
    height:90%;
    background:red;
}

.b { background:blue; }

.extra { height: 10%; }

footer {
    height:10%;
    background:black;
    position: fixed;
    width:100%;
    bottom: 0;
}

<div class="fullsection">A</div>
<div class="fullsection b">B</div>
<div class="extra"></div>
<footer>footer</footer>

每个全屏部分占页面高度的 90%，页脚固定在底部，高度为 10%。我还添加了一个空的“额外”div，供页脚在您到达页面底部时停留。