全屏布局，包含适当的部分

Question

肯定有各种方法可以让div覆盖整个屏幕，并在后台显示全屏图像，但大多数都会采用min-height:100%和background-size: cover属性，这样做会是，如果其他部分，如页脚/标题被放置，它通常＆＃34;漂浮＆＃34;在＆＃34;以上＆＃34;那个全屏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，当你到达页面底部时，页脚会停在那里。

Answer 2

display：flex

＆＃13;

＆＃13;

#viewport {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.content {
  flex: 1;
  background: #ddd;
}
.footer {
  flex-basis: 10%;
  background: #f00;
}

＆＃13;

<div id="viewport">

  <div class="content">

  </div>

  <div class="footer">

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

身高：90％/ 10％

＆＃13;

＆＃13;

#viewport {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.content {
  height: 90%;
  background: #ddd;
}
.footer {
  height: 10%;
  background: #f00;
}

＆＃13;

<div id="viewport">

  <div class="content">

  </div>

  <div class="footer">

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;