3

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

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

但是，子 div 中的内容不会将页面包装器 div 向下推，因此它会溢出到页脚并越过页脚。如果我在包装器 div 上设置了溢出：自动，那么它会正确显示但是我在包装器 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%;}
4

1 回答 1

1

不太确定 table 不合适，它完全符合你的要求，它需要 100%，并且增长 pushdown everything 。

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 存在，并且每个值都有不同的行为，应该在需要它们的地方选择它们，而不是 'hype' 或 'has been' 。
复古很酷；）。

display:flex 很快就会下订单 :)

于 2013-06-06T08:49:52.433 回答