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

Posted 2023-03-06

【中文标题】填充剩余的垂直空间 - 仅 CSS

【英文标题】：Fill remaining vertical space - only CSS

【发布时间】：2014-06-16 20:00:08

【问题描述】：

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

我需要一个唯一的 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>

【问题讨论】：

@Pete 不，它们是动态的。只有第一个 div 的高度是固定的 200px。而第二个 div 将填充包装器的剩余高度

你想要这个吗？ jsfiddle.net/K5n4U

@laaposto 不，这不是问题。 Wrapper 应该 100% 填满屏幕的整个垂直高度。

这是一个更好的例子：codepen.io/micjamking/pen/QdojLz

对这个问题的一些常见解决方案的漂亮而简洁的概述（在我看来这是一个非常明显的问题，我发现没有一个清晰、明确的 css 解决方案非常令人惊讶）whitebyte.info/programming/css/…跨度>

【参考方案1】：

您可以像这样在#second div 上使用position:absolute; 执行此操作：

FIDDLE

CSS：

#wrapper
    position:relative;


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

编辑：替代解决方案

根据你的布局和你在这些 div 中的内容，你可以让它变得更简单，并且像这样使用更少的标记：

FIDDLE

html：

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

CSS：

#wrapper 
    height:100%;
    width:300px;
    background-color:#9ACD32;

#first 
    background-color:#F5DEB3;
    height: 200px;

【讨论】：

不，它没有填充包装器的剩余空间。如果您想降低包装器的高度，您会看到它没有填充它。

@AbdulJabbarWebBestow 只需像这样jsfiddle.net/webtiki/Cb5bu 将position:relative; 添加到#wrapper，div 将填充包装器的剩余空间。

出色的工作。谢谢亲爱的 Web-Tiki

@Pete 好吧，这里的重点是填充剩余空间，因为它缺少内容......如果它必须有很多内容，就不会有任何问题。

@Pete，当内容溢出时，我发现您是正确的。不过还好，由于内容有限，不会溢出。

【参考方案2】：

如果您可以添加两个额外的 div，让您的 html 看起来像这样：

<div id="wrapper">
    <div id="first" class="row">
        <div class="cell"></div>
    </div>
    <div id="second" class="row">
        <div class="cell"></div>
    </div>
</div>

您可以使用display:table 属性：

#wrapper

   width:300px;
   height:100%;
   display:table;


.row 

   display:table-row;


.cell 

   display:table-cell;


#first .cell

   height:200px;
   background-color:#F5DEB3;


#second .cell

   background-color:#9ACD32;

Example

【讨论】：

正是这个，但它是跨浏览器的吗？

@AbdulJabbarWebBestow 它应该适用于 ie8 的所有浏览器 - caniuse.com/css-table

终于有了一个动态的答案。

【参考方案3】：

您可以使用 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 Example

如果您想完全支持 IE9 或更低版本的旧浏览器，则必须使用像 flexy 这样的 polyfill，这种 polyfill 支持 Flexbox 模型，但仅适用于 2012 年规范的 flexbox 模型。

最近我找到了另一个 polyfill 来帮助您使用 Internet Explorer 8 和 9 或任何不支持 flexbox 模型的旧浏览器，我还没有尝试过，但我留下了链接 here

你可以找到一个有用的 complete Guide to Flexbox model by Chris Coyer here

【讨论】：

Flexbox 模型仅支持更高版本的 IE10。如果你可以部分支持旧版本的 IE，你需要使用像 flexie 这样的 polyfill

它可以在 IE10 上运行吗？ caniuse.com 建议不要，不幸的是我必须支持它一段时间。 （原来正确的答案是“有点”：msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx）

如果有人正在阅读这篇文章并想让包装器 div 填充整个页面的高度，那么只需更改 height: 300px;到高度：100vh;

【参考方案4】：

您所需要的只是一些改进的标记。将第二个包裹在第一个中，它将呈现在下面。

<div id="wrapper">
    <div id="first">
        Here comes the first content
        <div id="second">I will render below the first content</div>
    </div>
</div>

Demo

【讨论】：

不工作，你能用一些颜色和盒子来做吗？

Jimmy 包装器实际上只是隐藏了溢出的内容，第二个 div 没有填充剩余空间。您可以通过在其中添加更多内容来查看

好吧，我可能理解错了。 #first div 有固定高度吗？不是动态的？

是的，JimmyRare 已修复

这可能就是你要找的东西@JimmyRare :jsfiddle.net/webtiki/9ETNU/3 no?

【参考方案5】：

如果您不想为您的主容器（顶部、底部、...）设置固定高度，您可以简单地使用这个css-file 来获得一个使用剩余空间的弹性容器，包括。在职的！！！滚动条

Fiddler

<!DOCTYPE html>
<html >
<head>
    <title>Flex Container</title>
    <link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css">

  <style>
    .cont
        background-color: blue;
        position: absolute;
        height: 100%;
        width: 100%;
    

    .headerContainer 
        background-color: green;
        height: 100px;
        width: 100%;
    

    .mainContainer 
        background-color: white;
        width: 100%;
        overflow: scroll
    

    .footerContainer 
        background-color: gray;
        height: 100px;
        width: 100%;
    
  </style>


  </head>

<body class="qx-flex-ready" style="height: 100%">
  <div class="qx-vbox cont">
    <div class="headerContainer">Cell 1: flex1</div>
    <div class="mainContainer qx-flex3">
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>

    </div>
    <div class="footerContainer" >Cell 3: flex1</div>
  </div>
</body>
</html>

【参考方案6】：

您只需添加 overflow:auto 选项：

#second

   width:300px;
   height:100%;
   overflow: auto;
   background-color:#9ACD32;

【参考方案7】：

弹性盒解决方案

html, body 
  height: 100%;


.wrapper 
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;


.first 
  height: 50px;


.second 
  flex-grow: 1;

<div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div>

【讨论】：

这个解决方案提供了如此多的便利。泰

渲染示例中有一个垂直滚动，所以垂直方向稍大。

@Neurotransmitter — 在您的 body 元素上设置 margin:0;。

@ReggiePinkham 关心更新答案吗？

@ReggiePinkham 问题是如何填充 剩余垂直空间，而不是如何超过它。

【参考方案8】：

您是否尝试过将包装高度更改为 vh 而不是 %？

#wrapper 
width:300px;
height:100vh;

当我想用渐变背景填充我的页面时，这对我来说非常有用......