html - 如何在 HTML 中创建列高相等的布局？

Question

我的 HTML/CSS 网页有问题。我想要这样的布局:

http://img227.imageshack.us/img227/9978/layoutw.png

但我得到的只是一个布局，其中的区域仅与内容一样高。

在这里你可以看到我的网站:http://ud05_188.ud05.udmedia.de/spotlight/jquery.html我尝试了几种解决方法，但都不起作用。

解决这个问题的最佳方法是什么？

Answer 1

你可以使用下面的代码

html

<div id="wrapper">
  <div id="left"></div>
  <div class="right">start of top</div>
  <div class="right">start of bottom</div>
</div>

CSS

html, body {
    height:100%;
}
#wrapper {
    height:100%;
    overflow:hidden;
}
#left {
    height:100%;
    width:50%;
    background:#09F;
    float:left;
}
.right {
    height:50%;
    width:50%;
    float:left;
    background:#69a;
}

实例:http://jsbin.com/idozi4