使内容最小高度填满屏幕

Question

举个例子,我做了一个小提琴:https: //jsfiddle.net/L7mwpzux/3/

如何让div .container最小化填充屏幕？因此,当几乎没有内容时,它仍会填满屏幕.

这是在结帐购物车为空时显示的页面.内容太薄,因此屏幕内容不完整.

---

Ps我不是在寻找一个假设页眉或页脚具有静态高度的答案.我希望能够在页眉或页脚的高度可变的情况下使用它.

此外,我会喜欢CSS解决方案,所以没有JavaScript或jQuery

Answer 1

你可以使用calc()和设置100vh - height of header,也可以添加box-sizing: border-box以保持填充.

* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
}
header {
  height: 200px;
  background-color: blue;
  width: 100%;
}
.container {
  padding: 50px;
  min-height: calc(100vh - 200px);
}
footer {
  width: 100%;
  height: 200px;
  background-color: #333;
}

<header>
</header>

<div class="container">
  small text
</div>

<footer>
</footer>

其他的方法是使用Flexbox和设置display: flex在这种情况下是父元素的主体,min-height: 100vh然后只需设置flex: 1,.container所以它需要剩余的自由高度.

* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  height: 100px;
  background-color: blue;
}
.container {
  padding: 50px;
  flex: 1;
}
footer {
  height: 100px;
  background-color: #333;
}

<header>
</header>

<div class="container">
  small text
</div>

<footer>
</footer>