如何伸展格的高度，以填补父格 - CSS

我有div的页面如下图所示如何伸展格的高度，以填补父格 - CSS

<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（标有绿色边框），不想跨越页脚DIV D.这里是工作提琴demo （更新）。我该如何解决这个问题？

来源

2011-04-07 blasteralfred Ψ

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

来源

2011-04-07 14:12:07 Snorbuckle

这将是，如果dif是空的。 – x10 2011-04-07 14:25:55

[小提琴：]（http://jsfiddle.net/UpGJq/）似乎罚款这里有一个空的div。 – Snorbuckle 2011-04-07 14:39:18

+10

不好回答＃B2将与#B一样高，但不能拉伸以填充剩余空间，如 – nest 2015-07-29 13:57: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; 
}

来源

2011-04-07 13:26:24 x10

没有..它填满整个页面上边距。我只想填写特定的div' B' – 2011-04-07 13:30:07

它在Chrome和Firefox中正常工作。如果这不适合你，你可以使用[Faux Columns]（http://www.alistapart.com/articles/fauxcolumns/） – x10 2011-04-07 13:44:21

它的工作原理，但它正在削减页脚'div id = D'。我不想让它穿越div＃ – 2011-04-07 13:59:55

-5

我会用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);

来源

2011-04-07 13:30:11 NKCSS

我正在寻找一个纯粹的CSS解决方案... – 2011-04-07 13:33:50

您可能想要添加到您的问题:) – NKCSS 2011-04-07 13:35:19

+38

是不是没有'javascript'或'jquery'标签不够？ – kapa 2011-04-07 14:04:04

如果你对造型的目的，你可以试试这个要去使用B2 “黑客”

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

jsFiddle

来源

2011-04-07 13:34:05 Teneff

看看@我更新的小提琴在这里http://jsfiddle.net/QWDxr/2/ – 2011-04-07 13:35:09

这个作品，谢谢。顺便说一句，它应该是'margin-bottom： - 9999px;'。你错过了减号。 – Gaui 2015-05-22 15:22:10

什么适合我的目的是创建一个总是在整个浏览器窗口内固定数量的div。

什么工作，至少在Firefox，是这样的

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

只要实际窗口没有强迫滚动，股利全部重新调整大小时保留其边界的窗口边缘。

希望这节省了一些人的时间。

来源

2013-08-07 07:21:33

假设你有

<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% 
}

来源

2017-07-06 12:34:31 onmyway133

如何伸展格的高度，以填补父格 - CSS

回答

相关问题