我有一个相当简单的布局(包括 bootstrap v4 类):
<div class="d-flex flex-column" style="width: 100%; height: 100vh;">
<div>foo</div>
<div style="flex: 1"></div>
<div>bar</div>
</div>
这给我留下了:
------------------------------------
| foo |
------------------------------------
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
------------------------------------
| bar |
------------------------------------
页眉和页脚的高度与其内容的高度相同，主体部分会自行扩展以填充浏览器中可用的空白空间。
当内容多于浏览器的总高度 -(页眉高度 + 页脚高度)时，问题就来了，在这种情况下，正文会不断自行扩展。
有没有办法可以限制 body 高度与剩余空间一样多？剩余空间 == 浏览器高度 -(页眉高度 + 页脚高度)。
提示:
我不知道页眉或页脚的高度，我会否决具有硬编码值的解决方案。如果您不明白这是什么意思，请不要回答。
我不想要 Javascript。这必须只是 CSS。 我将否决包含 javascript 的答案。
最佳答案
要防止内容超出页眉和页脚留下的最大可用空间，请在您的内容类中使用 min-height 属性。
By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.
body {
margin: 0;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: dodgerblue;
}
.container {
flex: 1;
min-height: 0;
overflow-y: scroll; /*overflow: hidden;*/
background-color: turquoise;
}
footer {
background-color: violet;
}<main>
<header>
Header
</header>
<div class="container">
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate mi odio, ac finibus tortor tempus a. Quisque eu ex ac nibh eleifend fringilla. Nunc accumsan arcu nec pharetra congue. In iaculis ante eu velit rutrum lobortis. Proin et
congue turpis. Quisque gravida nisl et sem lobortis, nec ultrices urna pretium. Nunc a viverra urna. Nam a cursus ligula. Aliquam justo enim, aliquam quis nulla ut, ornare sollicitudin ex. Sed vestibulum sodales semper. Duis vestibulum laoreet nibh
non condimentum. Maecenas sit amet scelerisque libero. Phasellus consequat quam id elit hendrerit, sit amet auctor augue finibus. Proin eu porta dolor. Suspendisse neque diam, iaculis eu felis sit amet, elementum scelerisque velit. Nunc mollis, magna
quis dignissim bibendum, magna ligula tristique diam, vitae bibendum lorem est in nisi. Nulla euismod auctor turpis, laoreet mattis neque bibendum et. Morbi condimentum nisl sit amet velit dignissim ultricies. Vestibulum commodo felis id nisl placerat
pharetra. Morbi ac lectus non metus porttitor mollis scelerisque vitae felis. Suspendisse luctus sollicitudin metus nec aliquet. Vestibulum in convallis leo. Nunc vel consequat libero. Sed dapibus ligula nisl, quis sagittis quam mollis sit amet. Duis
et viverra lorem. Nunc luctus risus ut justo venenatis consectetur. Sed et porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec sapien arcu. Suspendisse placerat cursus erat, pretium
finibus purus. Nulla at risus nulla. Mauris at lectus id diam rutrum aliquam eget et ante. Maecenas rutrum orci et ornare iaculis. Suspendisse potenti. Morbi est felis, bibendum at ante sed, rhoncus varius dui. Curabitur ac neque vitae lorem feugiat
tincidunt sed vitae quam. Aliquam ornare orci eu magna sollicitudin, quis fermentum diam condimentum. Ut consequat pulvinar risus. Vivamus vestibulum massa ut eros euismod sagittis. Fusce volutpat nisl aliquet, cursus dolor vestibulum, blandit turpis.
Nunc elementum tempus diam, quis ornare lectus pharetra ut. Sed sit amet efficitur nisl, a dictum metus. Suspendisse in purus ac elit tristique pulvinar at id mi. Donec mollis sem ut risus scelerisque sagittis. Maecenas gravida tristique odio id feugiat.
Etiam maximus nunc non erat facilisis luctus. Vivamus ut magna facilisis, iaculis massa quis, luctus nulla. Cras mattis faucibus rutrum. Curabitur quis auctor lacus. Nam tempus sapien vitae finibus dignissim. Curabitur sagittis, magna ac mattis dictum,
lacus nisi pretium purus, et maximus sem eros non turpis. Donec vel tortor erat. Maecenas finibus velit hendrerit lorem vestibulum imperdiet. Integer sed sem est. Fusce iaculis justo at ipsum cursus sodales. Integer vel odio ut enim feugiat euismod
id ac ex. Donec vel ante scelerisque, varius elit eget, finibus lectus. Quisque mattis, eros quis congue posuere, lorem quam scelerisque dolor, sed sagittis lacus massa eu ligula. Fusce viverra vitae mauris vitae euismod. Etiam sapien odio, fringilla
sit amet ultricies ut, vulputate sed leo. Vivamus maximus quam a risus interdum, ut venenatis ipsum tincidunt. Donec ultrices nisi id euismod egestas. Proin nec magna euismod, egestas nibh et, accumsan dolor. Integer sit amet libero eros. Cras augue
risus, pretium et aliquam vitae, malesuada id tortor. Nam fermentum placerat imperdiet. Etiam aliquam in tortor in dictum. Integer vel orci vitae dui dignissim ultricies vitae eget dui. Nullam vitae urna nec urna finibus cursus. Vestibulum scelerisque,
erat in auctor accumsan, ipsum elit bibendum sem, nec viverra nisi risus at urna. In sit amet nulla scelerisque, volutpat mi sed, pharetra ex. Nullam in felis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Nulla ut convallis arcu. Maecenas elementum nulla elit, id eleifend urna convallis id. In a pellentesque elit, nec sollicitudin orci. Vestibulum lacus odio, pulvinar nec placerat eu, porttitor sit amet ex. Integer sed pharetra turpis. Vestibulum
accumsan nulla et mi finibus, auctor congue ex lobortis. Cras fringilla purus velit. Vivamus sit amet semper tellus, non vehicula erat. Nam a finibus massa, at tempus felis. Integer at semper purus, eget laoreet neque. Etiam odio leo, laoreet at lacinia
ut, faucibus at magna. Mauris vestibulum nunc in ipsum feugiat pulvinar. Nulla lacinia diam eros, vel cursus ante ullamcorper sit amet. Pellentesque dictum, urna ac tincidunt ullamcorper, sem ligula faucibus tortor, eu lobortis risus est in nulla.
Phasellus magna sem, dignissim vitae justo vitae, dignissim ultrices diam. Mauris in neque vitae nisl elementum ornare ut tempor justo. Vestibulum vitae leo felis. Praesent porttitor sem et aliquam dignissim. Aenean eu quam id nulla hendrerit laoreet
sed dapibus purus. Praesent maximus rhoncus turpis, at egestas turpis. Vivamus turpis leo, porttitor id accumsan at, sagittis vel ante. Integer ultrices euismod euismod. Fusce bibendum lorem sit amet mi accumsan finibus. Morbi auctor quam id ex suscipit
maximus. Sed vel sem sollicitudin turpis rutrum gravida et eget mi. Nulla ac justo a neque tempus lobortis eu in mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus pulvinar aliquam nulla, sit amet pellentesque dolor. Proin
sed mollis ante. Nullam lectus diam, placerat non laoreet sit amet, imperdiet sed augue. Ut mollis mattis sem, ac suscipit mi eleifend nec. Phasellus convallis massa ut arcu viverra, vitae auctor lacus convallis. Etiam vitae blandit nunc. Donec non
turpis nec purus blandit dictum. Sed bibendum sollicitudin massa non egestas. In sed neque sit amet dolor egestas sodales convallis in nunc. Sed iaculis libero nec sem porttitor, accumsan bibendum magna eleifend. Mauris interdum quam nunc, sit amet
cursus orci consequat et. Phasellus nec maximus dolor. Sed vestibulum mattis iaculis. Praesent sodales sed nunc ac congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec vulputate mi odio, ac finibus tortor tempus a. Quisque eu ex ac nibh eleifend fringilla. Nunc accumsan arcu nec pharetra congue. In iaculis ante eu velit rutrum lobortis. Proin et congue turpis. Quisque gravida nisl et sem lobortis,
nec ultrices urna pretium. Nunc a viverra urna. Nam a cursus ligula. Aliquam justo enim, aliquam quis nulla ut, ornare sollicitudin ex. Sed vestibulum sodales semper. Duis vestibulum laoreet nibh non condimentum. Maecenas sit amet scelerisque libero.
Phasellus consequat quam id elit hendrerit, sit amet auctor augue finibus. Proin eu porta dolor. Suspendisse neque diam, iaculis eu felis sit amet, elementum scelerisque velit. Nunc mollis, magna quis dignissim bibendum, magna ligula tristique diam,
vitae bibendum lorem est in nisi. Nulla euismod auctor turpis, laoreet mattis neque bibendum et. Morbi condimentum nisl sit amet velit dignissim ultricies. Vestibulum commodo felis id nisl placerat pharetra. Morbi ac lectus non metus porttitor mollis
scelerisque vitae felis. Suspendisse luctus sollicitudin metus nec aliquet. Vestibulum in convallis leo. Nunc vel consequat libero. Sed dapibus ligula nisl, quis sagittis quam mollis sit amet. Duis et viverra lorem. Nunc luctus risus ut justo venenatis
consectetur. Sed et porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec sapien arcu. Suspendisse placerat cursus erat, pretium finibus purus. Nulla at risus nulla. Mauris at lectus
id diam rutrum aliquam eget et ante. Maecenas rutrum orci et ornare iaculis. Suspendisse potenti. Morbi est felis, bibendum at ante sed, rhoncus varius dui. Curabitur ac neque vitae lorem feugiat tincidunt sed vitae quam. Aliquam ornare orci eu magna
sollicitudin, quis fermentum diam condimentum. Ut consequat pulvinar risus. Vivamus vestibulum massa ut eros euismod sagittis. Fusce volutpat nisl aliquet, cursus dolor vestibulum, blandit turpis. Nunc elementum tempus diam, quis ornare lectus pharetra
ut. Sed sit amet efficitur nisl, a dictum metus. Suspendisse in purus ac elit tristique pulvinar at id mi. Donec mollis sem ut risus scelerisque sagittis. Maecenas gravida tristique odio id feugiat. Etiam maximus nunc non erat facilisis luctus. Vivamus
ut magna facilisis, iaculis massa quis, luctus nulla. Cras mattis faucibus rutrum. Curabitur quis auctor lacus. Nam tempus sapien vitae finibus dignissim. Curabitur sagittis, magna ac mattis dictum, lacus nisi pretium purus, et maximus sem eros non
turpis. Donec vel tortor erat. Maecenas finibus velit hendrerit lorem vestibulum imperdiet. Integer sed sem est. Fusce iaculis justo at ipsum cursus sodales. Integer vel odio ut enim feugiat euismod id ac ex. Donec vel ante scelerisque, varius elit
eget, finibus lectus. Quisque mattis, eros quis congue posuere, lorem quam scelerisque dolor, sed sagittis lacus massa eu ligula. Fusce viverra vitae mauris vitae euismod. Etiam sapien odio, fringilla sit amet ultricies ut, vulputate sed leo. Vivamus
maximus quam a risus interdum, ut venenatis ipsum tincidunt. Donec ultrices nisi id euismod egestas. Proin nec magna euismod, egestas nibh et, accumsan dolor. Integer sit amet libero eros. Cras augue risus, pretium et aliquam vitae, malesuada id tortor.
Nam fermentum placerat imperdiet. Etiam aliquam in tortor in dictum. Integer vel orci vitae dui dignissim ultricies vitae eget dui. Nullam vitae urna nec urna finibus cursus. Vestibulum scelerisque, erat in auctor accumsan, ipsum elit bibendum sem,
nec viverra nisi risus at urna. In sit amet nulla scelerisque, volutpat mi sed, pharetra ex. Nullam in felis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ut convallis arcu. Maecenas elementum nulla
elit, id eleifend urna convallis id. In a pellentesque elit, nec sollicitudin orci. Vestibulum lacus odio, pulvinar nec placerat eu, porttitor sit amet ex. Integer sed pharetra turpis. Vestibulum accumsan nulla et mi finibus, auctor congue ex lobortis.
Cras fringilla purus velit. Vivamus sit amet semper tellus, non vehicula erat. Nam a finibus massa, at tempus felis. Integer at semper purus, eget laoreet neque. Etiam odio leo, laoreet at lacinia ut, faucibus at magna. Mauris vestibulum nunc in ipsum
feugiat pulvinar. Nulla lacinia diam eros, vel cursus ante ullamcorper sit amet. Pellentesque dictum, urna ac tincidunt ullamcorper, sem ligula faucibus tortor, eu lobortis risus est in nulla. Phasellus magna sem, dignissim vitae justo vitae, dignissim
ultrices diam. Mauris in neque vitae nisl elementum ornare ut tempor justo. Vestibulum vitae leo felis. Praesent porttitor sem et aliquam dignissim. Aenean eu quam id nulla hendrerit laoreet sed dapibus purus. Praesent maximus rhoncus turpis, at egestas
turpis. Vivamus turpis leo, porttitor id accumsan at, sagittis vel ante. Integer ultrices euismod euismod. Fusce bibendum lorem sit amet mi accumsan finibus. Morbi auctor quam id ex suscipit maximus. Sed vel sem sollicitudin turpis rutrum gravida
et eget mi. Nulla ac justo a neque tempus lobortis eu in mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus pulvinar aliquam nulla, sit amet pellentesque dolor. Proin sed mollis ante. Nullam lectus diam, placerat non laoreet
sit amet, imperdiet sed augue. Ut mollis mattis sem, ac suscipit mi eleifend nec. Phasellus convallis massa ut arcu viverra, vitae auctor lacus convallis. Etiam vitae blandit nunc. Donec non turpis nec purus blandit dictum. Sed bibendum sollicitudin
massa non egestas. In sed neque sit amet dolor egestas sodales convallis in nunc. Sed iaculis libero nec sem porttitor, accumsan bibendum magna eleifend. Mauris interdum quam nunc, sit amet cursus orci consequat et. Phasellus nec maximus dolor. Sed
vestibulum mattis iaculis. Praesent sodales sed nunc ac congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<footer>
Footer
</footer>
</main>关于html - 使 flex 的增长不要超过最大父级高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42990202/