Question

我知道这个问题已被问过很多次了，但我找不到办法让它在我的特定情况下有效。

我有一个容器div，其中有2个div：第一个没有特定的高度，第二个应该填充视口的剩余高度。

我的容器div css：

.overlay_on {
    display: block !important;
    position:fixed;
    top:40px;
    left:0;
    width:100%;
    height:100%;
    min-height: 100%;
    z-index:1000;
    background-color: white;
}

代码：

<div class="overlay_on">
    <div style="max-width: 980px; margin: 0 auto; padding: 0;">some content that can expand</div>
    <div style="min-height:100%;height:100%; width: 100%;">other content that should fill the remaining height and not more</div>
</div>

问题是第二个div是取父级的高度而不是剩余的高度。

我该如何解决这个问题？

更新

我创造了一个小提示来表明问题：http://jsfiddle.net/3MgBx/
我想要的是第二个div（绿色）填充剩余的高度而不是更多（我在高度100％处放置一个漂亮的图像以显示div在窗口下方继续）

Answer 1

好吧，我正在回答自己：

我找到的解决方案是进行计算以找到剩余高度的百分比（并在窗口调整大小时重做它）

HTML

<div class="overlay_on">
<div id="bandeau-proj">some content that can expand - some content that can expand - some content that can expand - some content that can expand some content that can expand - some content that can expand - some content that can expand - some content that can expand - </div>
    <div id="slider-cont"><img src="http://wallpaper.metalship.org/images/immortal9.jpg"/></div>
</div>

CSS

.overlay_on { 
display: block !important;
position:fixed;
top:40px;
left:0;
width:100%;
height:100%;
min-height: 100%;
z-index:1000;
background-color: red;
}
#bandeau-proj{
    max-width: 980px;
    margin: 0 auto;
    padding:0;
}
#slider-cont{
    width: 100%;
    background-color:#00FF00;

}

img{height:100%;}

JAVASCRIPT

var top =  jQuery('#bandeau-proj').offset().top;
var hauteur =  jQuery('#bandeau-proj').outerHeight();
var ySlider = top+hauteur;
var WH = jQuery(window).height();
var available_percent = 100-((ySlider*100)/WH);

jQuery("#slider-cont").css('height',available_percent+'%');

和FIDDLE示例： http://jsfiddle.net/2vu9x/1/

css高度剩余内容的100％

更新

1 个答案: