javascript - 継承値を持つ親 div の高さと正確に等しくない Div

Question

親div内に3つのdivがあり、次のように配置することを目的としています:

 ______________________________________
|                                      |
|                HEADER                |
|______________________________________|
 ____   _______________________________
|    | |                               |
|    | |                               |
|    | |                               |
|    | |                               |
| N  | |                               |
| A  | |            CONTENT            |
| V  | |                               |
| -  | |                               |
| B  | |                               |
| A  | |                               |
| R  | |                               |
|    | |                               |
|    | |                               |
|____| |_______________________________|

高さは#header固定なので問題ありません。

ただし、#contentdiv のコンテンツは動的であり、読み込まれるページによって異なります。#nav-barの高さを#content常に合わせたいのですが、なかなかうまくいきません。

#contentとの最小高さを画面の高さの 100% にしたい#nav-bar(したがって、常に最小で画面の高さ全体を占める) が、それを#content超えて成長するにつれて、それに応じて成長したいと考え#nav-barています。

#nav-barの高さを大きくしましたが、とまったく同じ値では#contentないため、それらの高さはまだ一致していません。

これが私が配置した関連コードであり、問題の実際のページは hereです。

HTML:

<div id='container'>
    <div id='center-panel'>
        <div id='top-banner'></div>
        <div id='nav-bar'>
            <?php
            echo get_nav_list();
            ?>
        </div>
        <div id='header'><span id='fact-tag'>current points leader</span><span id='fact-value'>4</span></div>
        <div id='content'>Lorem ipsum...
        </div>
    </div>
</div>

CSS:

html, body {
    background-color: #ccc;
    min-height: 100%;
    margin: auto;
    font-family: 'Noto Sans', 'Tahoma', sans-serif;
    font-size: 12pt;
    color: #666;
}

#container {
    height: 100%;
    overflow: scroll;
}

#center-panel {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    background-color: #fff;
    min-height: 100%;
}

#header {   /*top bar*/
    height: 33px;
    max-height: 33px;
    text-align: right;
    color: #aaa;
    padding: 0px 15px 0px 160px;
    font-size: 18pt;
    border: 2px dashed blue;
}

#header span#fact-tag {
    font-weight: 700;
}

#header span#fact-value {
    display: inline-block;
    min-width: 40px;
    background-color: #ccc;
    margin-left: 10px;
    color: #444;
    padding: 0px 3px 0px 3px;
}

#nav-bar {  /*left bar*/
    float: left;
    width: 110px;
    text-align: center;
    height: inherit;
    font-family: 'Oxygen', 'Tahoma', sans-serif;
    padding: 33px 0px 0px 0px;
    border: 2px dashed red;
}

#nav-bar ul {   /*main menu*/
    list-style-type: none;
    text-align: left;
    font-size: 10pt;
    padding: 0px;
    margin: 0px;
}

#nav-bar > ul > li {    /*main menu item*/
    min-height: 35px;
    background-color: #444;
    color: #ccc;
    border-left: 6px solid #444;
    border-bottom: 3px solid #666;
    cursor: pointer;
}

#nav-bar ul > li > ul { /*sub-menu*/
    display: none;
}

#nav-bar ul > li > ul > li {    /*sub-menu item*/
    min-height: 25px;
    background-color: #555;
    border-bottom: 3px solid #444;
    font-size: 10pt;
    cursor: pointer;
}

#nav-bar ul > li > ul > li > ul > li {  /*third-level menu item*/
    border: none;
    min-height: 10px;
    font-size: 8pt;
    cursor: pointer;
}

#content {  /*central content area*/
    padding: 60px 45px 30px 160px;
    border: 2px dashed green;
}

Javascript:

$('#nav-bar ul li').on('click', function() {
    $(this).css('border-left-color', '#ad9557').siblings().css('border-left-color', '#666');
    $(this).children().slideDown('fast');
    $(this).siblings().children('ul').slideUp('fast');
});

$('#nav-bar').css('height', $('#container').height());

score 2 · Accepted Answer

display: tableレイアウトにfloatプロパティを使用することはお勧めできません。テーブルは表形式のデータ用であり、フロートは段落内でテキストをフロートできるように設計されています。この問題はposition: absolute、#navbar要素に割り当て、他の場所でいくつかのプロパティを調整して、レイアウトが希望どおりに機能するようにすることで、簡単に解決できます。

~~#navbar { padding: 33px 0px 0px 0px; float: left; }~~

#navbar {
    position: absolute;
    height: 100%;
}
#container {
    position: relative;
}
#nav-bar ul {
    margin: 33px 0 0;
}

ナビゲーションバーのパディングにより、ページの制限を超えて高さが増加していたため、marginオンに変更しました。#nav-bar ul絶対配置に関する詳細情報が必要な場合は、ここでさらに読むことができます。

このソリューションは JavaScript なしで機能し、ほとんどすべてのブラウザーで機能します。

編集: ユーザーの画面の高さと div の高さに応じてページを変更する必要があるため、jQuery ワンライナーを使用して、 div の高さが十分か#contentどうかを確認できます。#content

($('#content').offset().top+$('#content').height() < $(window).height())?($('#content').height($(window).height()-90-$('#content').offset().top)):null;

このコードは、「コンテンツ div の高さとオフセットがウィンドウの高さを下回っている場合は、コンテンツ div の高さをウィンドウを埋めるために必要な高さまで上げ、それ以外の場合は何もしない」ということと同じです。

score 1 · Accepted Answer

を使用するdisplay:tableと、どちらが大きいかに関係なく、2 つの列の高さが強制的に一致します。

score 0 · Accepted Answer

IE8 をサポートする必要がない場合は、単に次を使用しますcalc。

#nav-bar,
#content {
    min-height: calc(100% - 33px); // 33px is height of header, of course
}

IE8 をサポートする必要がある場合は、既に使用しているため、jQuery で設定するだけです。

$('#nav-bar, #content').css('min-height', ($(window).height() - 33) + 'px');

また、「#nav-bar」を常に「#content」の高さと一致させたい場合は、次のように追加します。

$('#nav-bar').css('height', $('#content').height() + 'px');

別の可能性は、を使用することflex-boxです。

score 0 · Accepted Answer

これを試して：

「!important」を追加するだけです:

$('#nav-bar').css('height', ($('#container').height()+'!important'));

javascript - 継承値を持つ親 div の高さと正確に等しくない Div

5 に答える 5

Related

Reference