如何在父容器中自动拉伸并约束HTML子元素？

Question

如果我们从此HTML元素设置开始：

...然后，我们利用CSS flexbox，将flex-grow属性应用于“ body”元素，我们得到：

它的行为可以完全在CSS中完成而无需任何JavaScript，这真是太棒了。

但是，假设我们希望父容器元素具有固定的高度，并且子元素（即页眉，正文和页脚）不应溢出父容器。

假设header和footer元素的内容是固定的，但是主体内容是动态的（服务器端或客户端，这都没有关系），并且我们希望当内容太大时body元素具有垂直滚动条，例如所以：

但是，我找不到纯粹在CSS中实现该行为的方法（即，不使用JavaScript）并且没有为所有子元素指定固定的高度（不希望的）。

只需在父级上使用固定高度的flex-grow属性，就会导致以下结果（当主体内容变得太大时）：

有没有办法在纯CSS中做到这一点？

如果没有，我们认为扩展flexbox标准来封装这种行为是否值得？

编辑1

因此，我的用例与我发布的用例相似，但相异之处足以掩盖问题，因此引起了人们对我什至首先遇到问题的担忧。

扩展LGSon的答案，这是我的用例：

 html, body { margin: 0; } body { display: flex; /* IE 11/10 min-height bug fix - or an extra wrapper in the markup */ } .wrapper { display: flex; flex-direction: column; height: 100vh; width: 100%; } .body { flex: 1; } .content { overflow: auto; } /* below CSS is just for the extra styling */ .wrapper { height: calc(100vh - 44px); /* 2*2px border + 2*10px margin */ width: calc(100% - 44px); /* + 2*10px padding = 44px */ border: 2px dashed black; margin: 10px; padding: 10px; } .wrapper > div { padding: 10px; } .header { border: 2px solid blue; margin-bottom: 10px; } .body { border: 2px solid green; } .footer { border: 2px solid red; margin-top: 10px; } 

 <div class="wrapper"> <div class="header"> Header<br> </div> <div class="body"> <h1> Hello world! </h1> <div class="content"> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> </div> </div> <div class="footer"> Footer<br> </div> </div> 

因此，我实际上在层次结构中有另一个级别，并且我的overflow属性太深了一个级别。

对我来说，在我那里有overflow似乎是合乎逻辑的，但是根据您的答案/示例（甚至从我的用例）进行构建，将其上移至一个级别，就可以使它起作用（在我看来，这是违反直觉的）。

我可以一半理解它为什么起作用，但是我本以为滚动条将覆盖整个身体元素，而不仅仅是内容部分。

抱歉造成误导。

感谢大家。

编辑2

我将奖励第一个人更改答案（或创建一个新答案），并结合我的澄清（在第一次编辑中）和正确答案。

Answer 1

使用flexbox此示例执行您所要求的操作，而子级没有固定的高度。

完全动态的.header和.footer ，以及.body会在需要时滚动，因此它们都位于其父级.wrapper 。

请注意，关于滚动，您要使要滚动的元素溢出，而不是可能导致溢出的元素。

 html, body { margin: 0; } body { display: flex; /* IE 11/10 min-height bug fix - or an extra wrapper in the markup */ } .wrapper { display: flex; flex-direction: column; height: 100vh; width: 100%; } .body { flex: 1; overflow: auto; } /* below CSS is just for the extra styling */ .wrapper { height: calc(100vh - 44px); /* 2*2px border + 2*10px margin */ width: calc(100% - 44px); /* + 2*10px padding = 44px */ border: 2px dashed black; margin: 10px; padding: 10px; } .wrapper > div { padding: 10px; } .header { border: 2px solid blue; margin-bottom: 10px; } .body { border: 2px solid green; } .footer { border: 2px solid red; margin-top: 10px; } 

 <div class="wrapper"> <div class="header"> Header<br> </div> <div class="body"> <h1> Hello world! </h1> <div class="content"> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> </div> </div> <div class="footer"> Footer<br> </div> </div> 

---

当你说全身元素，如果你的意思，而不是实际的HTML body ，不与元素.body类，然后用min-height的.wrapper并从取出溢.body 。

您可以将溢出设置为html body元素，尽管默认情况下不需要滚动它

 html, body { margin: 0; } body { display: flex; /* IE 11/10 min-height bug fix - or an extra wrapper in the markup */ } .wrapper { display: flex; flex-direction: column; min-height: 100vh; width: 100%; } .body { flex: 1; } /* below CSS is just for the extra styling */ .wrapper { min-height: calc(100vh - 44px); /* 2*2px border + 2*10px margin */ width: calc(100% - 44px); /* + 2*10px padding = 44px */ border: 2px dashed black; margin: 10px; padding: 10px; } .wrapper > div { padding: 10px; } .header { border: 2px solid blue; margin-bottom: 10px; } .body { border: 2px solid green; } .footer { border: 2px solid red; margin-top: 10px; } 

 <div class="wrapper"> <div class="header"> Header<br> </div> <div class="body"> <h1> Hello world! </h1> <div class="content"> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> Content<br> </div> </div> <div class="footer"> Footer<br> </div> </div> 

Answer 2

我认为这是CSS最少的版本，可以满足您的要求。

 * { margin: 0; padding: 0; } html,body { max-height: 100%; height: 100%; } #header { border: 2px solid blue; color: blue; height: 4em; margin-bottom: .5em; } #content { border: 2px solid green; color: green; height: calc(100vh - 10em); margin-bottom: .5em; overflow-y: scroll; } #footer { border: 2px solid red; color: red; height: 4em; } 

 <body> <div id="header">This is the header</div> <div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p> <p>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p> <p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. </p> <p>Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. </p> <p>Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. </p> <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. </p> <p>Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. </p> <p>Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. </p> </div> <div id="footer">This is the footer</div> </body> 

Answer 3

Flexbox就是这样做的。难道是您忘记了删除正文上的默认边距吗？

 .wrapper { height: 100vh; display: flex; flex-direction: column; } body { margin: 0; } header, footer { background: grey; flex-basis: 50px; } section.grow { flex-grow: 1; } 

 <div class="wrapper"> <header></header> <section class="grow"></section> <footer></footer> </div>