div填充父母和中心孩子答案

【问题标题】：div filling parent and center childrendiv填充父母和中心孩子
【发布时间】：2014-11-24 01:36:20
【问题描述】：

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

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

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

我还需要与 ie8 兼容（遗憾的是没有 flexbox）。

唯一存在的固定大小是#container 之一。

这里是sn-p：

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

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

我查看了表格显示，绝对定位，:before hack，但没有什么能正确...

这是一个具有相同代码的代码笔：http://codepen.io/anon/pen/NPPVZX

结果应该是这样的：http://codepen.io/anon/pen/OPPeOv

（但列表中可能有更多/更少的 div 以及不同的页脚/页眉大小）

提前致谢。

【问题讨论】：

标签： html css css-position

【解决方案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 是否支持，以及您所说的“内部 div 必须保持其一侧”的意思，所以我假设您希望 #list divs 的高度保持不变.

如果不是你的情况，那就去吧

#list div { height: 31.5%; }

美国东部时间 2 这是另一个尝试。

试试 1

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

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

尝试 2：使用多个表。

简答here，但是由于我加了太多东西，比如重新修改布局（为嵌套表格加了一层div），还有很多display:tables，所以布局有点破（比如边距不均匀）。这是我能做的最多了。

【讨论】：

不是真的，我不够清楚，我更新了我的问题。不过谢谢！
已更新。这是你现在想要的吗？
那样的话，恐怕我帮不了你了。只有3种方法可以做到，1是每次手动计算宽度，2是使用Javascript自动处理，3是停止对ie8s进行黑客攻击。
添加了一些希望能有所帮助的东西。它不是对齐的，但它可以按照您的意愿灵活地工作

【解决方案2】：

一个带有更多标记的答案，感谢@logo，这是一个具有所需效果的代码笔：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; }

再次感谢！

【讨论】：