-1

我知道这个问题已经被问过很多次了，但我找不到一种方法让它在我的特定情况下起作用。

我有一个容器 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 在窗口下方继续）

4

1 回答 1

0

好的，我正在回答自己：

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

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+'%');

和小提琴示例：http: //jsfiddle.net/2vu9x/1/

于 2013-06-12T14:13:00.653 回答