如何展开div高度来填充父div – CSS

我有一个像下面divs的页面

<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 div的高度来填充(或拉伸)到整个div B (用绿色边框标记),而不想跨越div div D.这里是一个工作小提琴演示 (更新)。 我该如何解决这个问题?

只需添加height: 100%;#B2造型。 min-height不应该是必要的。

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

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

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

的jsfiddle

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

是什么工作,至less在Firefox上,是这样的

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

只要实际窗口不被强制滚动,div在所有resize的过程中都会保留与窗口边界的边界。

希望这能节省一些时间。

假设你有

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

如果大小可以变化,我会用javascript解决scheme(jQUery)解决它。

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