CSS解决方案垂直拉伸div

Question

我在一个父div中有3个子div。 第一和第三div具有固定高度。 如何让第二个div占用所有剩余空间。只寻找CSS解决方案。

HTML：

<div id="parent">
    <div id="first">1</div>
    <div id="second">2</div>
    <div id="third">3</div>
</div>

CSS：

div{border:1px solid #000}
#parent{width:200px;height:300px}
#first{width:100%;height:50px;background-color:red}
#second{width:100%;height:auto;background-color:yellow}
#third{width:100%;height:50px;background-color:blue}

JSFIDDLE：https://jsfiddle.net/n4ncb57w/

Answer 1

尝试使用 flex 。

#parent{width:200px;height:300px; display: flex; flex-direction:column}
#second{width:100%;height:auto;background-color:yellow; flex-grow: 100;}

小提琴https://jsfiddle.net/n4ncb57w/4/

注意IE兼容性http://caniuse.com/#search=flex

Answer 2

我假设：

1. 我们不知道父div
的高度
2. 第一个和第三个div的高度（让他们称之为＆＃39; top＆＃39;＆＃39; bottom＆＃39;）提前知道
3. 第二个div的高度（让我们称之为＆＃39;中间＆＃39;）是未知的：它应该占据＆＃39; top＆＃39;之间的所有空间。和＆＃39;底部＆＃39; div（只有那个空格），无论它有多少或多少内容。

解决方案1：使用＆＃39;绝对＆＃39;与顶部＆＃39;定位和＆＃39;底部＆＃39;

如果＆＃39;中间＆＃39; div使用绝对定位，你不设置它的高度，但是设置它的顶部＆＃39;和＆＃39;底部＆＃39;然后它将自动拉伸以填充。我没有测试过，但标记看起来像这样：

<div id="parent">
    <div id="top">
        Heading at the TOP!
    </div>

    <div id="middle">
        Lorem ipsum dolor sit amet, consectetuer...
    </div>

    <div id="bottom>
        ...and here is the BOTTOM.
    </div>
</div>

...样式表看起来像这样：

#parent { 
    width: 100%; 
    height: 100vh; 
    position: relative; 
}

#top, #middle, #bottom { 
    box-sizing: border-box;
    margin: 0px;
    position: absolute;
}

#top {
    top: 0px;
    height: 63px; // <- the set height of the top
}

#bottom {
    bottom: 0px;
    height: 96px; // <- the set height of the bottom
}

#middle { 
    // no 'height' - use both 'top' and 'bottom' instead
    top: 63px; // <- the set height of the top
    bottom: 96px // <- the set height of the bottom
    overflow: auto;
}

这可能是最直接的方式，可能是最好的跨浏览器支持。

解决方案2：使用calc()

如果您不关心支持较旧的浏览器（例如Internet Explorer 9或更早版本），那么您可以使用calc()让浏览器自动计算“中间”＆＃的高度39; div为你。 calc()内置CSS功能允许您混合不同的度量单位 - 例如＆＃39;％＆＃39;和＆＃39; px＆＃39;在你的计算中。使用calc()，您的样式表将如下所示：

#parent { 
    width: 100%; 
    height: 100vh; // this is the parentHeight
    position: relative; 
}

#top, #middle, #bottom { 
    box-sizing: border-box;
    margin: 0px;
}

#top {
    height: 63px; // <- the topHeight
}

#bottom {
    position: absolute;
    bottom: 0px;
    height: 96px; // <- the bottomHeight
}

#middle { 
    // Automatically calculate the height using 'calc'.
    // The formula for the calculated height should be:
    // (parentHeight - (topHeight + bottomHeight)):
    height: calc(100vh - 159px);
    overflow: auto;
}

解决方案3：使用Flexbox布局

有几个在线教程涵盖了如何实现您想要的 - 以及更多 - 使用新的＆＃39; flexbox＆＃39;布局模式，所以我不打算在这里介绍它。 Flexbox是CSS的一个相对较新的补充，尽管当前版本的Firefox，Chrome和Safari支持得非常好，但Internet Explorer 10和11并没有（它有很多错误）。考虑到有更简单的替代解决方案 - 如上所述 - 此时我可能会选择其中一种解决方案。然而，Flexbox是未来，如果你想学习如何使用它，这将是一个很好的练习：去学习它！ ; - ）

我可能还有其他解决方案，所以看看有多少建议会在这里变得有趣......

我希望这有帮助！

Answer 3

一种解决方案是使用calc。

#second{
  width:100%;
  height:auto;
  background-color:yellow; 
  height: calc(100% - 100px);
}

并且

#parent > div {
    box-sizing: border-box;
}

<强> Working Fiddle

Answer 4

使用calc()方法。 JSFiddle

div {
  border: 1px solid #000
}
#parent {
  width: 200px;
  height: 300px
}
#first {
  width: 100%;
  height: 50px;
  background-color: red
}
#second {
  width: 100%;
  height: calc(100% - 106px);
  background-color: yellow
}
#third {
  width: 100%;
  height: 50px;
  background-color: blue
}

<div id="parent">
  <div id="first">1</div>
  <div id="second">2</div>
  <div id="third">3</div>
</div>

Answer 5

我会使用CSS提供的calc()函数来完成。

second{height: calc(100% - 106px);}

所以这里做的是从100％中减去#first和#third的组合高度。因此，在这种情况下，它的2x 52px（包含边框），现在因为#second也有1px边框，我们再减去2 px。

Fiddle