填充剩余的垂直空间 \- 仅 CSS

Question

我需要用 #second div 填充 #wrapper 下 #first 的 剩余垂直空间。

我需要一个唯一的 CSS 解决方案。

 #wrapper {
  width: 300px;
  height: 100%;
}

#first {
  width: 300px;
  height: 200px;
  background-color: #F5DEB3;
}

#second {
  width: 300px;
  height: 100%;
  background-color: #9ACD32;
}

 <div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
</div>

原文由 Airy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 position:absolute; 在 #second div 上执行此操作，如下所示：

小提琴点击预览

CSS：

 #wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

编辑：替代解决方案

根据您的布局和这些 div 中的内容，您可以使其更简单，并且使用更少的标记，如下所示：

小提琴点击预览

HTML：

 <div id="wrapper">
    <div id="first"></div>
</div>

CSS：

 #wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}

原文由 web-tiki 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 CSS Flexbox 代替另一个显示值，Flexbox 布局（Flexible Box）模块旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态。

例子

/* CONTAINER */
#wrapper
{
   width:300px;
   height:300px;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* SOME ITEM CHILD ELEMENTS */
#first
{
   width:300px;
    height: 200px;
   background-color:#F5DEB3;

}

#second
{
   width:300px;
   background-color: #9ACD32;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
}

jsfiddle 示例点击预览

如果你想完全支持像 IE9 或更低版本的旧浏览器，你将不得不使用像 flexy 这样的 polyfills ，这个 polyfill 启用对 Flexbox 模型的支持，但仅适用于 2012 规范的 flexbox 模型。

最近我发现另一个 polyfill 可以帮助你使用 Internet Explorer 8 & 9 或任何不支持 flexbox 模型的旧浏览器，我还没有尝试过但我把链接 留在这里

您可以 在此处 找到 Chris Coyer 撰写的有用且 完整的 Flexbox 模型指南

原文由 xzegga 发布，翻译遵循 CC BY-SA 3.0 许可协议