Question

我在父div中有3个div，意图安排如下：

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

#header是固定的高度，所以我对它没有任何问题。

但是，#content div的内容是动态的，具体取决于加载的页面。我希望#nav-bar始终与#content的高度匹配，但我无法管理它。

我希望#content和#nav-bar的最小高度为屏幕高度的100％（因此它们始终占据屏幕的最大高度），但是#content超出此范围，我希望#nav-bar相应增长。

我已经#nav-bar的身高增长，但与#content的价值并不完全相同，所以他们的身高仍然不匹配。

以下是我所拥有的相关代码，以及the actual page in question is 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());

Answer 1

使用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，因为导航栏的填充导致其高度超过页面限制。如果您需要有关绝对定位的更多信息，可以进一步阅读here。

此解决方案无需javascript即可运行，几乎适用于所有浏览器。

编辑：由于您希望页面根据用户屏幕的高度和#content div的高度而改变，您可以使用jQuery one-liner检查是否{{1} div很高或不高。

#content

此代码相当于说“如果内容div的高度和偏移量低于窗口的高度，请将内容div的高度增加到填充窗口所需的高度，否则不执行任何操作。”

Answer 2

使用display:table，这将强制两列的高度匹配，无论哪个更大。

Answer 3

如果您不必支持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。

Answer 4

试试这个：

只需添加'！important'：

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

Answer 5

我的尝试as a jsFiddle。大部分更改都在CSS和HTML中;实际导航高度设置几乎与您发布的代码完全相同：

$('#nav-bar').css(
    'height',
     $('#content-container').height() - parseInt($('#nav-bar').css('border-width'), 10) * 2);

其中parseInt($('#nav-bar').css('border-width'), 10) * 2用于考虑#nav-bar上的演示边框;你的解决方案可能不需要这个。

Div不完全等于父div的高度与继承值

5 个答案: