0

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

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

这是我目前拥有的演示。

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

我已经做了几次尝试（在我开始使用桌子之前和之后），但他们都没有远程工作。我作为最后的手段来到这里，所以我希望有人能提供帮助。

4

2 回答 2

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 属性

编辑： 如果您不能使用表格单元格，那么您必须使用一些 jquery 来计算高度。检查这个小提琴

于 2012-07-29T16:35:22.473 回答
0

我会做这样的事情：

. 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%;
}

你可以看到它在这个 fiddle中工作。

于 2012-07-29T16:45:12.717 回答