2

私はブートストラップベースのレイアウトを使用しており、その div の下に「コンテンツ」と呼ばれる div があり、基本的に大きなテーブルであるすべてのコンポーネント、以下に示す div を配置しました。問題は、特定の高さを明示的に div と呼ばれる scheduler_here (以下に示す) に指定しない限り、非常に小さく見えることです。以下に、div コンテンツの css セットアップを以下に示します。高さを 100% に指定しようとしましたが、うまくいきません。私はCSSの専門家ではなく、ただ学んでいます。親の「コンテンツ」divを変更して、スケジューラがウィンドウの高さを維持するようにする方法、またはスクロールバーで表示する方法はありますか?

<div id="content" class=" span10">
    <div id="scheduler_here" class="dhx_cal_container span10" style="height:2000px;width:95%">
     <div class="dhx_cal_navline" class="span10">
     <div class="dhx_cal_prev_button">&nbsp;</div>
     <div class="dhx_cal_next_button">&nbsp;</div>
    </div>
</div>



#content {
       box-shadow: -3px -1px 2px rgba(0, 0, 0, 0.95);
       background: url("/static/img/bg.jpg") repeat scroll 0% 0% transparent;
       filter: none;
       padding: 25px 0px 25px 40px;
       margin: -25px -4px;
       position: relative;
       z-index: 1;
       min-height: 100%;
 }
4

2 に答える 2

2

% 値を使用するときに高さ (または最小高さ) をゼロ以外の値に計算するには、親コンテナーに明示的な高さの値または計算値が必要です。

あなたの場合、高さを に設定し、htmlタグbodyを 100% に設定する必要があるかもしれないので、試してみることをお勧めします:

html, body {
    height: 100%;
}

そうすれば#container、ビューポートの高さを継承し、計算された高さの値を明確に定義できます。

脚注

body と #container div の間にあるすべてのブロック レベルの祖先要素に高さが設定されていることを確認する必要があります。高さを継承するか、明示的な値 (例: 400px) または相対値 (例: 100%) に設定します。

于 2013-06-22T22:05:28.610 に答える
0

FWIW onResize イベントハンドラーを登録することで、この問題を解決しました。クレジット: http://css-tricks.com/forums/discussion/20271/setting-a-div-height-to-the-window-viewport-size/p1

    $(document).ready(function(){
            resizeDiv();
    });

    window.onresize = function(event) {
            resizeDiv();
    }

    function resizeDiv() {
            vpw = $(window).width(); 
            vph = $(window).height(); 
            $('#scheduler_here').css({'height': vph + 'px'});
    }
于 2013-06-23T05:47:13.720 に答える