如何展开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不应该是必要的。
使用“最小高度”属性
警惕填料，边距和边界:)
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);
