举个例子,我做了一个 fiddle : https://jsfiddle.net/L7mwpzux/3/
如何使 div .container
最小地填满屏幕?
所以当几乎没有内容时,它仍然会填满屏幕。
它用于结帐车为空时显示的页面。内容太细,所以屏幕没有完全填满内容。
附言我不是在寻找假设页眉或页脚具有静态高度的答案。我希望能够在页眉或页脚高度可变的情况下使用它。
另外,我喜欢 CSS 解决方案,所以没有 JavaScript 或 jQuery
最佳答案
您可以使用 calc()
并设置 100vh - 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
并在 body 上设置 display: flex
,在这种情况下,它是父元素,min-height: 100vh
然后只需在 .container
上设置 flex: 1
,这样它就可以占据剩余的自由高度。
* {
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>
关于html - 使内容最小高度填满屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39527808/