身高：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％相匹配的浏览器的高度

回答

相关问题