Question

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

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

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%添加到中心CSS，但这不起作用。

Answer 1

您要实现的目标是 Faux Columns

所以有一些方法可以实现你想要的。您可以查看http://robsphp.blogspot.nl/2012/06/unofficial-microsoft-sql-server-driver.html了解详情，并查看演示here

在上面的链接中，您将找到实现所要求的方法：

Doug Neiner Method（Five Columns）
Doug Neiner方法（三列，差宽度，源顺序改变）
CSS表
实际表格
Nicolas Gallagher Method
一种真正的布局方法

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

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

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

Answer 2

最简单的方法是使用css显示div这样的div。这是有趣的代码。（注意html div顺序和CSS中的更改。）

/* This isn't in my production code, this is just a quick and dirty reset for on JSFiddle */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
main {
  display: table;
  border-bottom: 1px solid red;
  background: #FFFFFF;
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
}
#left,
#center,
#right {
  padding: 1rem;
  display: table-cell;
}
#left {
  width: 192px;
}
#right {
  width: 288px;
}
#center {
  border-left: 1px solid red;
  border-right: 1px solid red;
  overflow: hidden;
}
#left .menu {
  list-style: none;
}
.clearfix {
  clear: both;
}
}

<main>
  <nav id="left">
    <ul class="menu">
      <li>Alpha</li>
      <li>Beta</li>
      <li>Gamma</li>
      <li>Delta</li>
    </ul>
  </nav>

  <section id="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>

  <aside id="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </aside>
</main>

将兄弟姐妹培养成浮柱的高度

2 个答案: