身高：100％相匹配的瀏覽器的高度

HTML：

<html> 
    <body> 
    <div> 
     <section></section> 
     <section>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </section> 
    </div> 
    </body> 
</html>

CSS：

html, body { 
    height: 100%; 
} 

div { 
    display: flex; 
    height: 100%; 
    align-items: stretch; 
} 

div > section:first-of-type { 
    width: 400px; 
    height: 100%; 
    background: #0f0; 
} 
div > section:last-of-type { 
    height: 100%; 
    background: #f00; 
    width: 200px; 
}

基本上我需要的綠色部分和紅色部分具有相同的高度。目前，紅色部分不會擴展，其內容與綠色部分相同。

我加的高度：100％兩部分，html和身體，但我得到如下結果：http://jsfiddle.net/cs8f65wp/

正如你可以看到，背景「切」兩個部分滾動之後，所以我猜測身高：100％是造成這個問題的原因。

有沒有辦法解決這個HTML/CSS（沒有JavaScript），爲什麼我有這個問題？

來源

2014-12-06 Mentalhead

到http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-類似同一高度 – Tzach 2014-12-06 09:43:25

使用min-height代替flex容器的高度。這樣它會延伸到身體或內容的高度，無論哪個更高。沒有必要在flex內容上設置高度。

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    display: flex; 
 
    align-items: stretch; 
 
    min-height: 100%; 
 
} 
 
div > section:first-of-type { 
 
    width: 400px; 
 
    background: #0f0; 
 
} 
 
div > section:last-of-type { 
 
    width: 200px; 
 
    background: #f00; 
 
}

<div> 
 
    <section></section> 
 
    <section> 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    </section> 
 
</div>

來源

2014-12-06 09:41:39

身高：100％相匹配的瀏覽器的高度

回答

相關問題