CSS - 100％的高度/寬度問題

Question

我需要你的幫助有：

1. html, body和#content有100％& & #toolbar的高度有50像素的高度，他是靜態=>我需要計算的#content高度以填充而不滾動條中的內容
2. #content > .a必須具有的300像素和#content > .b寬度必須計算寬度以填充內容

jsfiddle.net：

1. https://jsfiddle.net/4uesapnt/2/
2. https://jsfiddle.net/4uesapnt/2/embedded/result/

Answer 1

1）你可以使用這個CSS3 calc()功能（docs）和視臺（vh，vw）（docs）。

#content { 
    height: calc(100vh-50px); /* substract #toolbar height from the entire page's height*/ 
} 

2）再次，你可以使用視窗單位和calc()功能：

#content > .a { 
    width: 300px; 
} 

#content > .b { 
    width: calc(100vw-300px); /* substract #content .a's width from the entire page's width */ 
} 

這是對的jsfiddle：https://jsfiddle.net/hL7nxs6v/1/

請注意，如果你調整窗口的大小是寬度小於300px + .b的某些合理寬度，如果沒有指定任何合適的min-width s，佈局可能會中斷。

瀏覽器支持viewport units,calc function通過Can I Use。

Answer 2

這似乎爲我在Chrome工作。我從來沒有使用flex之前，所以我真的不知道是什麼支持是這樣的：

https://jsfiddle.net/eeesrkjr/

我給#content頂部填充，以留出空間的標題，因爲box-sizing:border-box;它doesn」強迫它超過100％的高度。然後，標題絕對定位在50px空間中。我試着在#content內部找到標題，以便不必絕對定位，但flex做了奇怪的事情。如果你更好地理解這些事物如何相互作用，也許你可以嘗試這條路線。

HTML：

<div id="toolbar" class="flex aic jcsb"> 
    <div class="a">A</div> 

    <div class="b">B</div> 

    <div class="c flex aic jcsb"> 
     <div class="b">C</div> 
     <div class="c">D</div> 
     <div class="d">E</div> 
    </div> 
</div> 

<div id="content" class="flex"> 
    <div class="a">A</div> 

    <div class="b">B</div> 
</div> 

樣式：

* { 
    box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
} 

body { 
    background: #111; 
    font-family: "Helvetica Neue"; 
    font-weight: 300; 
} 

#toolbar { 
    background: linear-gradient(#333, #222); 
    border-bottom: 1px solid #000; 
    color: #bbb; 
    height: 50px; 
    padding: 0 25px; 
    width:100%; 
    position:absolute; 
    top:0px; 
} 

#toolbar > .c > div { 
    margin: 0 12.5px; 
} 

.flex { 
    display: flex; 
} 

.flex.aic { 
    align-items: center; 
} 

.flex.jcsb { 
    justify-content: space-between; 
} 

.flex.fdc { 
    flex-direction: column; 
} 

#content { 
    color: #fff; 
    height: 100%; 
    padding-top:50px; 
    box-sizing:border-box; 
} 

#content > .a { 
    background: red; 
    width: 300px; 
    float:left; 
} 

#content > .b { 
    background: blue; 
    width:100%; 
}