Question

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

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

这是我目前的{{3}}。

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

我已经多次尝试这样做（在我开始使用表之前和之后）但是它们都没有远程工作。我作为最后的手段来到这里，所以我希望有人可以提供帮助。

Answer 1

.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>

注意：支持IE8 +

支持table-cell属性

修改如果你不能使用table-cell那么你必须使用一些jquery来计算高度。查看this Fiddle

Answer 2

我会做这样的事情：

。 HTML：

<div id="container">
    <aside id="sidebar">Links and whatnot</aside>
    <section id="content">Content and whatnot</section>
</div>

。 CSS：

html, body {
    width: 100%;
    height: 100%;
}

div#container {
    height: 100%;
}

aside#sidebar {
    background-color: #f00;
    width: 205px;
    min-height: 100%;
    float: left;
}

section#content {
    background-color: #0f0;
    min-height: 100%;
}

您可以在this fiddle中看到它。

转换为无表格布局

2 个答案: