实现这种布局

Question

有人可以告诉我如何实现这种布局。

我曾尝试使用表格和浮动的div。问题是我需要B和C具有相同的内容高度，并且我试图以相应的方式执行此操作，因此无法使用固定值。 我已经有了布局，但没有B和C有匹配的高度。 我最好只用css和html来做这件事。 我已经搜索了一些基本的模板，但我找不到任何可以解决问题的方法。 任何帮助，将不胜感激。如果需要，我确实有代码，但它没有实际用途。图片说明了一切。

Answer 1

至少对于Firefox，请看这个小提琴：http://jsfiddle.net/9vH8r/1/

HTML

<div id="a">A</div>
<div id="b"><p>B</p><p>B</p><p>B</p></div>
<div id="c"><p>C</p><p>C</p><p>C</p><p>C</p></div>

CSS

body, html{ padding: 0; margin: 0; height: 100%; }
#a{
 position: absolute;
 width: 200px;
 background: red;
 height: 100%;
}
#b, #c{ width: 100%;
 height: 50%;
 margin: -16px 0 0 200px;
}
#b{ background: green; }
#c{ background: blue; }

应该这样做。 。

Answer 2

这在所有浏览器中都不容易实现（正如您所发现的），唯一可靠的方法是浮动a然后将b和c放入容器并浮动，宽度为百分比并执行高度用一点javascript。

但是，如果你不关心旧的浏览器（我知道，梦想是对的！）你可能会有更多的运气使用CSS 3 flexbox。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

祝你好运！