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

ryoqjall 于 2023-02-14 发布在其他

关注(0)|答案(8)|浏览(170)

我需要用#second div填充#first下#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>

css

来源：https://stackoverflow.com/questions/23389098/fill-remaining-vertical-space-only-css

8条答案

按热度按时间

0ve6wy6x1#

您可以使用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由克里斯coyer here

赞(0）回复(0）举报 2023-02-14

ee7vknir2#

使用CSS伸缩框（MDN Web Docs）。

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>

赞(0）回复(0）举报 2023-02-14

sigwle7e3#

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

- 一个
中央支助组 *

#wrapper{
    position:relative;
}

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

- 编辑：备选解决方案**

根据布局和div中的内容，您可以让它更简单，使用更少的标记，如下所示：

- 第一个e第一个f第一个x
HTML格式 *

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

中央支助组 *

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

赞(0）回复(0）举报 2023-02-14

j7dteeu84#

如果你可以添加一对额外的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

赞(0）回复(0）举报 2023-02-14

q9rjltbz5#

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

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

例如，当我想用渐变背景填充页面时，这对我来说效果很好。

赞(0）回复(0）举报 2023-02-14

jckbn6z76#

如果你不想让你的主容器有固定的高度（顶部，底部，...），你可以简单地使用这个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>

赞(0）回复(0）举报 2023-02-14

nkkqxpd97#

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

<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

赞(0）回复(0）举报 2023-02-14

7eumitmz8#

您可以只添加overflow：auto选项：

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

赞(0）回复(0）举报 2023-02-14

我来回答

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

8条答案

相关问题

热门标签

最新问答