html - 实现这个布局

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

祝你好运！