inline-block 流体布局，子内容不会展开父容器

Question

我早些时候在这里问了一个关于我正在自定义 drupal 首页中开发的流体 3 列布局的问题，贡献者建议我从使用边距动态调整大小的绝对容器 div 切换到其他东西 - 我选择了 显示：内联块。 （我讨厌浮点数，表格单元格看起来像是倒退了一步）

当我在所有父 div 上指定百分比高度时，我能够均匀地间隔我的三个 div，甚至可以让孩子的 100% 高度与父高度匹配。

但是子 div 中的内容不会将页面包装器 div 向下推，因此它会溢出到页脚并越过页脚。如果我在包装器 div 上设置 overflow:auto ，那么它会正确显示但我在包装器 div 上得到一个我不想要的滚动条。

如果我从页面包装器中删除高度值，子内容会扩展页面包装器，因为它应该但是我失去了我的子 div 的所有高度！！！

是否有一些技巧可以使这项工作（或者我错过了什么），因为我需要它还是我坚持以另一种方式做？我尝试了 min-height:xx%，但它不起作用。

    <div id="page-div">
     <div id="inline-wrapper">
      <div id="top-content">
       <div id="left">user picture, links</div>
       <div id="center">blah blah blah blah blah</div>
       <div id="right">user picture, links</div>
      </div>
      <div id="a nav menu"></div>
      <div id="main-content">
       <div id="left">user picture, links</div>
       <div id="center">blah blah blah blah blah</div>
       <div id="right">user picture, links</div>
      </div>
     </div>
    </div>
    <div id="footer"></div>

html, body {height:100%}
#page-div {height:100%;width:80%;margin:0 auto;}
#inline-wrapper {height:100%;width:100%;background-color:#fff;}
#top-content {height:100%; width:98%;}
#top-content div {vertical-align:top;}
#left, #center, #right {display:inline-block;height:100%;}
#left, #right {width:13%;background-color:#000;}
#center {width:74%;}
#footer {height:250px;width:100%;margin-top:3%;}

Answer 1

不太确定表格不合适，它完全符合您的要求，它需要 100%，并且会增长所有内容。

http://codepen.io/gcyrillus/pen/hsEbJ（显示表用于它能够从任何给定高度增长）

http://codepen.io/gcyrillus/pen/udvgj（display:inline-block，如果给定高度，则推送不多:)）

element {display:inline-block;}
            /* or ? */
element {display:table;}

事实上（恕我直言），存在 display 和 float 并且每个值都有不同的行为，应该在需要它们的地方选择它们，而不是“炒作”或“已经存在”。
复古很酷；）。

display:flex 很快就会下单 :)