Question

我之前在这里提出了一个关于流体3列布局的问题，我在自定义drupal首页中进行了开发，并且贡献者建议我从使用边距的绝对容器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（显示：如果给出高度，则内推块不会推得太多:)）

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

事实上（恕我直言），显示和浮动存在，每个值都有不同的行为，应该在你需要的地方选择，而不是“炒作”或“已经”。复古很酷;）。

显示：flex将很快下订单：）

内联块流体布局，子内容不会扩展父容器

1 个答案: