flexbox：使用flex-direction拉伸元素的高度：行

Question

I want to stretch two div elements ( .sideline and .main-contents ) to reach the bottom of the page and stay at a certain height from the footer.

The two divs are nested inside a div ( .row-elements ) with the flex-direction: row since I wanted them to be on the same row.

 /* body { display:flex; flex-direction:column; } */ .one-above-all { display: flex; flex-direction: column; /* flex: 1 0 auto; */ /* min-height: 1100px; */ border: solid black 1px; } .top-block { margin: 0 auto; border: solid black 1px; width: 300px; height: 30px; margin-top: -15px; } .headline { border: solid black 1px; width: 90%; align-self: flex-end; margin-top: 40px; margin-right: 10px; height: 160px; display: flex; box-sizing: border-box; } .row-elements { display: flex; flex-direction: row; margin-top: 40px; align-items: stretch; /* min-height: 900px; flex: 1 0 auto; */ } .sideline { width: 160px; border: solid 1px; margin-left: calc(10% - 10px); box-sizing: border-box; flex-shrink: 1 } .main-contents { border: solid 1px; margin-left: 40px; /* align-self: stretch; */ flex: 1 1 auto; margin-right: 10px; box-sizing: border-box; } .bottom-block { align-self: flex-end; margin-top: auto; border: black solid 1px; margin: auto; width: 300px; height: 30px; margin-bottom: -10px; /* margin-top: 880px; */ } /* .stretch-test { border:solid, 1px; display: flex; flex-direction: column; flex: 1 0 auto; } */ 

 <div class="one-above-all"> <div class="top-block"></div> <div class="headline"></div> <!-- <div class="stretch-test"> --> <div class="row-elements"> <div class="sideline"></div> <div class="main-contents">jhjkdhfjksdhafjksdahfl</div> <!--</div> --> </div> </div> <div class="bottom-block">footer</div> 

Codepen

The commented out code in the css is the things I have tried.

I tried to set the body as flex and give the row-elements class flex property of 1 0 auto which didn't work.

I tried nesting the row-elements class (which has the flex-direction of row ) in another div with a flex-direction of column and setting .row-elements to flex:1 0 auto which also didn't work.

I tried totally removing the the row-elements class but the two divs won't come on the same row.

Any solution will be appreciated.

Answer 1

To stick the footer to the bottom, here are two methods:

Method #1: justify-content: space-between

Align the container vertically with flex-direction: column . Then pin the last element to the bottom with justify-content: space-between .

revised codepen

Method #2: auto margins

Also with the container in column-direction, apply margin-top: auto to the footer, which spaces it away from the other flex items. (Seems you're already familiar with this method.)

Here's a detailed explanation for both: Methods for Aligning Flex Items

Make sure to define a height for your container, unless you simply want content height. In my example I've used height: 100vh on body .