Làm cách nào để tôi thực hiện một div lấp đầy phần tử cha của nó theo chiều dọc?

Question

Tôi đang cố gắng để có được #sidebar để điền #main theo chiều dọc (và phù hợp với chiều cao của #content). Làm thế nào để tôi làm điều này?

Here's my jsFiddle.

CSS:

#main { 
    border: solid green 2px; 
} 

#sidebar { 
    background-color: red; 
    width: 20%; 
    overflow: auto; 
    float: left; 
    height: 100%; 
} 

#content { 
    background-color: orange; 
    width: 80%; 
    overflow: auto; 
    float: left; 
    height: 100%; 
} 

#main-footer { 
    clear: both; 
}​ 

Và html:

<div id="main"> 

<div id="sidebar"> 
    <ul> 
     <li>abc</li> 
     <li>def</li> 
    </ul> 
</div> 

<div id="content"> 
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
</div> 

<div id="main-footer"> 
</div> 

</div>​ 

Answer 1

Nếu không thiết lập chiều cao div rõ ràng nó là một chút khéo léo. Here is one solution.

Answer 2

div là một vùng chứa. Nó sẽ mất chiều cao nội dung của nó mất. Cách duy nhất để đạt được những gì bạn muốn là sử dụng chiều cao trong px. Nếu bạn không quan tâm về đánh dấu ngữ nghĩa (tôi khuyên bạn nên) thì liên kết của septemberbrain là một thủ thuật tốt.

Answer 3

2017 giải pháp: Đối với tôi, nó hoạt động tốt với flexbox. Tôi cần nội dung trang được kéo dài trên chiều cao cửa sổ đầy đủ nếu nội dung phải nhỏ hơn chiều cao cửa sổ.

 html, 
     body{ 
     min-height: 100%; 
     display: box; 
     display: flexbox; 
     display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
     display: -ms-flexbox; /* TWEENER - IE 10 */ 
     display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10*/ 
     display: -moz-box; 
     display: flex; 
     -webkit-box-orient:vertical; 
     -moz-box-orient: vertical; 
     box-orient: vertical; 
     -webkit-box-direction:normal; 
     -webkit-flex-direction:column; 
     -ms-flexbox-direction:column; 
     -ms-flex-direction: column; 
     flex-direction:column; 
     } 
     body{ 
     -webkit-box-flex: 1; 
     -webkit-flex: 1 1; 
     -ms-flex: 1 1; 
     flex: 1 1; 
     } 
     #page{ 
     -webkit-box-flex: 100; 
     -webkit-flex: 100 100; 
     -ms-flex: 100 100; 
     flex: 100 100; 
     } 
     footer{ 
     -webkit-box-flex: 1; 
     -webkit-flex: 1 1; 
     -ms-flex: 1 1; 
     flex: 1 1; 

     -ms-flex-preferred-size: 300px; 
     -webkit-flex-basis: 300px; 
     flex-basis: 300px; 
     } 
     @media only screen and (max-width:500px) { 
     footer{ 
      -ms-flex-preferred-size: 400px; 
      -webkit-flex-basis: 400px; 
      flex-basis: 400px; 
     } 
     } 

Answer 4

cao Loại bỏ từ #sidebar và #content và thêm display:flex để #main nên làm các trick.

tức

#main { 
    border: solid green 2px; 
    display: flex; 
} 

#sidebar { 
    background-color: red; 
    width: 20%; 
    float: left; 
} 

#content { 
    background-color: orange; 
    width: 80%; 
    float: left; 
} 

See JSFiddle.