如何拉伸div高度以填充父div-CSS

106

我有一个如下所示的div页面

<div id="container">
    <div id="A">
    </div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D">
    </div>
</div>

样式

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

我想调整div的高度B2以填充（或拉伸到）整个div B（标有绿色边框），并且不想越过页脚divD。这是一个工作的小提琴演示（已更新）。我该如何解决？

css

— 阿尔弗雷德
source

38

只需添加height: 100%;到#B2造型。min-height应该没有必要。

— 斯诺巴克
source

4

如果dif为空，则为空。

— x10

39

错误的答案＃B2会和#B一样高，但不会按要求伸展以填满剩余的空间

— 嵌套

3

这不适用于与float其父级不同的div 吗？

— 唐·奇德尔

它覆盖了B1并占据了所有空间； /

— mikus

1

显然这是行不通的，height：100％是容器的100％（我认为大多数情况下是整个视口）-它的高度将超过期望值。

— BT

25

假设你有

<body>
  <div id="root" />
</body>

使用普通CSS，您可以执行以下操作。查看可运行的应用程序https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

使用flexbox，您可以

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

— 第133章
source

10

http://jsfiddle.net/QWDxr/1/

使用“最小高度”属性
警惕填充，边距和边框:)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

— 10倍
source

1

号..它用高边距填充整个页面。我只想填写特定的divB

— Alfred

它可以在chrome和firefox中正常工作。如果这对您不起作用，则可以使用Faux Columns

— x10

它有效，但是却使页脚显得空白div id= D。我不希望它越过div d

— Alfred

2

height:100%缺少#B2样式的分号。

— 埃米尔（Emil）

5

适合我的目的是创建一个div，该div始终在整个浏览器窗口内以固定数量限制。

至少在firefox上起作用的是

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

在不强制实际窗口滚动的情况下，div在所有重新调整大小时都将其边界保留到窗口边缘。

希望这可以节省一些时间。

— 史密斯
source

5

如果您要使用B2进行样式设置，则可以尝试此“ hack”

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

— 特内夫
source

1

这行得通，谢谢。顺便说一句，应该是margin-bottom: -9999px;。您错过了减号。

— 盖伊2015年

1

B2容器相对位置

剩余高度的最高位置B2 +

B2的高度+ B1的高度或剩余高度

— 德米特罗·尤琴科（Dmytro Yurchenko）
source

将父节点设置为相对位置可以解决我不相关的问题！谢谢！

— Deejers

0

我用height: stretch;。在这里您可以找到有关用法的一些详细信息。

— 伊荷尔
source

-4

如果大小可以变化，我会用JavaScript解决方案（jQUery）解决。

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
source

8

您可能想将其添加到您的问题中：）

— NKCSS 2011年

48

缺少javascript或jquery标签不够吗？

— 卡帕

1

这也是完全不必要的。在过去的几年中，CSS取得了长足的进步。检出flex-box和calc（）。

— 肖恩·惠纳

1

Flexbox不支持<IE10 :(

— Constant Meiring 2015年

@ConstantMeiring真正的问题是，有人甚至在乎<IE10吗？;）

— Clonkex