html - 转换为无表布局

Question

我目前使用 1 个表格来对齐网站的 2 个主要部分。它现在给我带来了问题，所以我想使用纯 CSS。

我在左侧有一个 205 像素宽的导航栏列。占据右边的剩余空间，我想要一个容器(所以在屏幕的右侧，占用屏幕宽度 - 200 像素)这个容器没有固定的高度，但我想要它的顶部与导航栏的顶部对齐。

这是一个 demo我目前拥有的。

我希望解决方案与此类似，但不使用表格，并使容器的顶部与侧边栏的顶部对齐。

我已经多次尝试这样做(在我开始使用该表之前和之后)，但都没有远程工作。我是不得已才来这里的，所以我希望有人能提供帮助。

Answer 1

Fiddle

.container{height: 100%; border: 1px solid #0f0; display: table;}
#sidebar{
    width:40%; height: 100%; display: table-cell; background: #ccc;    
}
#sidebar2{
    width:60%; height: 100%; display: table-cell; background: #f00;    
}
body, html {
    height:100%;
}

HTML

<div class="container">
  <div id="sidebar">links and whatnot go here</div>
  <div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>    
</div>

注意:table-cell属性支持IE8+

编辑: 如果你不能使用 table-cell 那么你必须使用一些 jquery 来计算高度。检查this Fiddle