讓我的包裝div元素全高

Question

我需要有wrapper div元素爲全高，因此根據頁面的整個高度調整其高度，以便不顯示滾動條。

我的HTML：

<header> 
    I am the header and my height is fixed to 40px. 
</header> 

<div id="wrapper"> 
    I am the wrapper 
</div> 

我的CSS：

html,body { 
    height: 100%; 
    background: blue; 
    margin: 0; 
    padding: 0; 
} 
header { 
    height: 40px; <-------- this value is fixed 
    background-color: green; 
} 
#wrapper { 
    height: 90%; 
    background-color: red; 
} 

我知道在wrapper的height: 90%是錯誤的，但我不知道該怎麼辦。

這裏是的jsfiddle：https://jsfiddle.net/3putthcv/1/

Answer 1

您可以使用CSS calc()：

#wrapper { 
    height: calc(100% - 40px); /* 40px is the header value */ 
    background-color: red; 
} 

JSFiddle

---

或者display:table/table-row：

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: blue; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
header { 
 
    display: table-row; 
 
    height: 40px; 
 
    background-color: green; 
 
} 
 
#wrapper { 
 
    display: table-row; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<header>I am the header and my height is fixed to 40px.</header> 
 
<div id="wrapper">I am the wrapper</div>

JSFiddle

Answer 2

怎麼樣設置基礎上，top，left，right和bottom像這樣（demo）大小（全面披露，它不會，如果內容是too large工作）：

#wrapper { 
background-color: red; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 40px; 
}