html - 增长到 float 列的高度

Question

我有一个 3 列布局，边列都有固定宽度，中心列增长以适应剩余空间。我有一个明确的修复方法来强制父容器成为它最高列的高度。

如果其中一个更高，我想让中心列也增长以匹配 float 列的高度，但是我不知道如何实现这一点。

HTML 的结构如下:

<main>
    <nav id="left"></nav>
    <aside id="right"></aside>
    <section id="center"></section>

    <div class="clearfix"></div>
</main>

使用以下 CSS:

main {
    display: block;
    border-bottom: 1px solid red;
    background: #FFFFFF;
    width: 100%;
    min-width: 960px;
    margin: 0 auto;
}

#left {
    float: left;
    width: 192px;
}

#right {
    float: right;
    width: 288px;
}

#center {
    border-left: 1px solid red;
    border-right: 1px solid red;
    overflow: hidden;
}

.clearfix {
    clear: both;
}

http://jsfiddle.net/nfxLcp44/

我尝试将 height: 100% 添加到 center CSS 但那没有用。

Answer 1

您要实现的是人造列

所以有几种方法也可以实现你想要的。你可以查看here有关更多信息，请查看演示 here

在上面的这个链接中，您将找到这些方法来实现您的要求:

• Doug Neiner 方法(五列)
• Doug Neiner 方法(三列、差异宽度、源顺序已更改)
• CSS 表
• 实际表
• 尼古拉斯加拉格尔方法
• 一种真正的布局方法

根据您的示例，我使用了 CSS TABLE 解决方案，这与已经存在的代码类似。

main {
  display: table;
  background: #FFFFFF;
  width: 100%;
  min-width: 960px;
  margin: 0 auto;     
  table-layout: fixed; /* this might me optional, further reading here
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout */
  
}
.cell {
  display: table-cell;
  border: 1px solid red;
  padding: 1% /* demo purposes */
}
#left {
  width: 192px;
}
#right {
  width: 288px;
  border-left: 0; /*delete double borders */
  border-right:0 /*delete double borders */
}

<main>
  <nav id="left" class="cell">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </nav>
  <aside id="right" class="cell">Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</aside>
  <section id="center" class="cell">Vestibulum tortor quam, feugiat vitae,</section>
</main>

注意:此答案基于我自己对您可以找到的另一个问题的回答 here