-1

この質問が何度も出されていることは知っていますが、私の特定のケースで機能させる方法が見つかりません。

2 つの div があるコンテナー div があります。最初の div には特定の高さがなく、2 番目はビューポートの残りの高さを埋める必要があります。

私のコンテナ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>

問題は、2 番目の div が残りの高さではなく、親の高さを取得していることです。

どうすればこれを修正できますか?

アップデート：

問題を示すためにフィドルを作成しました : http://jsfiddle.net/3MgBx/
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%;}

ジャバスクリプト

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 に答える