Điền vào div-height còn lại chỉ sử dụng CSS

Tôi có hai div: s trong một vùng chứa.
Div đầu tiên phải có chiều cao tự động, lấy bất kỳ khoảng trống nào là bắt buộc.
Div thứ hai phải có chiều cao còn lại của vùng chứa.Điền vào div-height còn lại chỉ sử dụng CSS

Tôi muốn làm điều này mà không cần sử dụng Javascript.

Không có giải pháp chỉ CSS nào? Có thể bằng cách sử dụng display:table/display:table-cell hoặc display:flex? Ví dụ

không làm việc

<!DOCTYPE html> 
<html> 
<head> 
<title>Stretch</title> 
<style type="text/css"> 
    html { height: 100%; } 
    body { 
     padding: 0 0; 
     margin: 0 0; 
     height: 100%; 
     background: grey; 
    } 
    #container { background: pink; } 
    #autoHeight { background: blue; } 
    #remainingHeight { background: green; } 
</style> 
</head> 

<body> 
    <div id="container"> 
     <div id="autoHeight">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</div> 

     <div id="remainingHeight">This div should fill out the rest, making the display 
      mainly green. And no, I don't mean to just have green background. It will 
      contain other things.</div> 
    </div> 
</body> 
</html>

Nguồn

2013-06-17 ANisus

thể trùng lặp của [Thực hiện một div lấp đầy không gian màn hình còn lại] (http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen -không gian) –

tôi có thể đạt được điều này bằng display:table và display:table-row (không làm việc với IE7 trở lên).

http://cssdeck.com/labs/elars8pj

html { height: 100%; } 
body {  
    padding:0 0; 
    margin:0 0; 
    height: 100%; 
    background:grey; 
} 
#container { 
    display:table; 
    height:100%; 
    width:100%; 
    background:pink; 
} 
#autoHeight { 
    display:table-row; 
    background:blue; 
} 
#remainingHeight { 
    display:table-row; 
    height:100%; 
    background:green; 
}

Nguồn

2013-06-17 14:17:27 ANisus

Điền vào div-height còn lại chỉ sử dụng CSS

Trả lời

Các vấn đề liên quan