使flex不会超过最大父高

时间:2017-03-24 02:07:53

标签: html css flexbox

我有一个相当简单的布局(包括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                              |
------------------------------------

页眉和页脚,其内容的高度与其内容一样多,并且主体会自动展开以填充浏览器中可用的空白区域。

如果内容多于浏览器的总高度(标题高度+页脚高度),则会出现问题,在这种情况下,正文会自行扩展。

有没有办法可以限制身高与剩余空间一样多?剩余空间==浏览器高度 - (标题高度+页脚高度)。

提示:

  • 我不知道页眉或页脚的高度,我将使用硬编码值下载解决方案。如果你不明白这意味着什么,请不要回答。

  • 我不想要Javascript。这必须只是CSS。 我将downvote 包含javascript的答案。

1 个答案:

答案 0 :(得分:1)

要防止内容超出页眉和页脚留下的最大可用空间,请使用内容类中的min-height属性。

  

默认情况下,弹性项目不会缩小到最小内容大小以下   (最长字或固定大小元素的长度)。改变   这样,设置min-width或min-height属性。

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>