0

我在父 div 中有 3 个 div，打算这样排列：

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

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

但是，#contentdiv 的内容是动态的，具体取决于加载的页面。我想#nav-bar一直匹配的高度#content，但我一直无法管理它。

我希望 和 的最小高度为#content屏幕#nav-bar高度的 100%（因此它们始终至少占据屏幕的整个高度），但是#content随着超出此范围，我想#nav-bar相应地增长。

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

这是我已有的相关代码，有问题的实际页面在这里。

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());
4

5 回答 5

2

使用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;
}

我更改了marginon#nav-bar ul因为导航栏的填充导致它的高度增加超过页面的限制。如果您需要更多关于绝对定位的信息，可以在此处进一步阅读。

这个解决方案可以在没有 javascript 的情况下运行，并且几乎可以在所有浏览器上运行。

编辑：由于您希望页面根据用户屏幕的高度和#contentdiv 的高度而改变，您可以使用 jQuery one-liner 检查#contentdiv 是否足够高。

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

这段代码相当于说“如果内容 div 的高度和偏移量低于窗口的高度，则将内容 div 的高度增加到填充窗口所需的高度，否则什么也不做。”

于 2013-06-17T15:22:56.853 回答
1

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

于 2013-06-17T15:10:24.070 回答
0

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

于 2013-06-17T15:18:33.130 回答
0

试试这个：

只需添加“！重要”：

$('#nav-bar').css('height', ($('#container').height()+'!important'));
于 2013-06-17T15:22:11.167 回答
0

我作为 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；您的解决方案可能不需要这个。

于 2013-06-17T15:40:17.040 回答