如何在父容器中自動拉伸並約束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>