Question

我需要一个非常简单的标记：

扩展div以填充其父级
垂直居中该元素的子项

因此#wrapper必须占用所有可能的高度，将页脚推到#container的底部。里面的div必须保持他们的一面，所以他们的位置只会改变。（基本上只有元素位置会发展，而不是它们的大小）。

此外，我需要与ie8的兼容性（所以没有可爱的flexbox）。

唯一存在的固定尺寸是#container。

之一

以下是摘录：

＆＃13;

/* position */
/* any idea ? */

/* fixed size */
#container { height: 300px; }

/* display purpose */
* {
  border: 1px black solid;
  margin: 2px;
  color: #fff;
}
#container { background-color: #999; }
#header, #wrapper { background-color: #666; }
#footer, #list { background-color: #444; }
#list div { background-color: #222; }

＆＃13;

<div id="container">
  <div id="header">header</div>
  <div id="wrapper">
    <div id="list">
      <div>div</div>
      <div>div</div>
      <div>div</div>
    </div>
    <div id="footer">footer</div>
  </div>
</div>

＆＃13;

我看了桌子显示，绝对定位，:before黑客，但没有什么能做到这一点......

以下是具有相同代码的codepen：http://codepen.io/anon/pen/NPPVZX

结果应如下所示：http://codepen.io/anon/pen/OPPeOv

（但是列表中可能有更多/更少的div和不同的页脚/标题大小）

提前致谢。

Answer 1

/* position */
#wrapper, #list, #list div { flex-grow: 1; }

/* fixed size */
#container { height: 300px; }

/* display purpose */
div{
  border : 1px black solid;
  margin: 2px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

#container        { background-color : #999; }
#header, #wrapper { background-color : #666; }
#footer, #list    { background-color : #444; }
#list div         { background-color : #222; }

分叉http://codepen.io/Logo/pen/KwwjWr

不确定这是否是你想要的。

编辑抱歉。

/* position */
#wrapper { height: 91%; }
#list { height: 90%; }
#list div { margin-bottom: 9.9%; }

这使用百分比，我不确定ie8是否支持，你所说的内容必须保持他们的一面＆＃34;，所以我假设你想要高度不受#list div的影响。

如果情况不是这样，那么请使用

#list div { height: 31.5%; }

EDT 2 这是另一种尝试。

尝试1

/* position */
#container *, #wrapper * { max-height: 90.5%; }
#list { padding:9.6% 0; }

这不是完全自动化的尝试，因此您必须更改填充或高度，以防它们不同。

尝试2：使用多张表。

简短回答here，但由于我添加了太多内容，例如重新修改布局（为嵌套表添加一层div）以及大量display:table s，布局是一个有点破碎（边缘不均匀）。这是我能做的最多。

Answer 2

有了更多标记的答案，感谢@logo，这是一个具有所需效果的codepen：http://codepen.io/anon/pen/jEPNby

/* position */

#header { display:table-header-group; }
#footer { display:table-footer-group; }
#wrapper2 { height:100%; }
#wrapper, #list { display:table-cell; }
#container, #wrapper2 { display:table; width: 100%;}
#list { vertical-align: middle; }

再次感谢！

div填补父母和中心孩子

2 个答案: