Question

我正在尝试让我的右侧导航div根据内容框的大小占用剩余的垂直空间。我已经尝试将身体和div的高度设置为100％，绝对定位和哭泣，这些选项似乎都没有让我得到理想的结果。

以下是我一直用作概念证明的小提琴：https://jsfiddle.net/5punpLs6/

#nav {
    float: right;
    background-color: blue;
    height: 100%;
}
#content {
    background-color: #333;
    overflow: hidden;
}
#footer {
    background-color: green;
    height: 50px;
}

<div id="nav">
    <ul>
        <li>home</li>
        <li>home</li>
        <li>home</li>
    </ul>
</div>
<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus nulla nisl, sit amet hendrerit erat iaculis in. Ut tristique sem purus, sit amet condimentum ex auctor vitae. Aliquam ornare lorem quis odio laoreet placerat. Fusce nec egestas erat, ac porta lectus. Vivamus accumsan sed elit quis volutpat. Donec suscipit fermentum arcu eu consectetur. Aenean sit amet neque at enim dapibus imperdiet. Ut facilisis tellus leo, sed rhoncus lacus suscipit quis. Morbi sit amet quam ullamcorper, tincidunt lacus a, hendrerit dui. Pellentesque laoreet lectus eget tempor suscipit. Nam quis condimentum eros, a facilisis neque. Pellentesque ultrices aliquet nisi vitae interdum.</p>
</div>
<div id="footer"></div>

Answer 1

像height:100%这样的百分比高度仅在父级具有已知高度时才起作用。在您的情况下，如果您只需要背景颜色来覆盖整个区域，则可能不需要它，因此您只需将导航和内容包装到包装器中，并在其上设置背景。

<强> JsFiddle Demo

#wrapper {
    background-color: blue;
}
#nav {
    float: right;
}
#content {
    background-color: #333;
    overflow: auto;
}
#footer {
    background-color: green;
    height: 50px;
}

<div id="wrapper">
    <div id="nav">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus nulla nisl, sit amet hendrerit erat iaculis in. Ut tristique sem purus, sit amet condimentum ex auctor vitae. Aliquam ornare lorem quis odio laoreet placerat. Fusce nec egestas erat, ac porta lectus. Vivamus accumsan sed elit quis volutpat. Donec suscipit fermentum arcu eu consectetur. Aenean sit amet neque at enim dapibus imperdiet. Ut facilisis tellus leo, sed rhoncus lacus suscipit quis. Morbi sit amet quam ullamcorper, tincidunt lacus a, hendrerit dui. Pellentesque laoreet lectus eget tempor suscipit. Nam quis condimentum eros, a facilisis neque. Pellentesque ultrices aliquet nisi vitae interdum.</p>
    </div>
</div>
<div id="footer"></div>

或者使用CSS表格布局，这将确保内容和导航具有完全相同的高度。注意，稍微重新排序标记。

<强> JsFiddle Demo

#wrapper {
    display: table;
    border-collapse: collapse;
}
#content, #nav {
    display: table-cell;
    vertical-align: top;
}
#content {
    background-color: #333;
}
#nav {
    background-color: blue;
}
#footer {
    background-color: green;
    height: 50px;
}

<div id="wrapper">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus nulla nisl, sit amet hendrerit erat iaculis in. Ut tristique sem purus, sit amet condimentum ex auctor vitae. Aliquam ornare lorem quis odio laoreet placerat. Fusce nec egestas erat, ac porta lectus. Vivamus accumsan sed elit quis volutpat. Donec suscipit fermentum arcu eu consectetur. Aenean sit amet neque at enim dapibus imperdiet. Ut facilisis tellus leo, sed rhoncus lacus suscipit quis. Morbi sit amet quam ullamcorper, tincidunt lacus a, hendrerit dui. Pellentesque laoreet lectus eget tempor suscipit. Nam quis condimentum eros, a facilisis neque. Pellentesque ultrices aliquet nisi vitae interdum.</p>
    </div>
    <div id="nav">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</div>
<div id="footer"></div>

Answer 2

您有两种选择：一种是已经说过，添加一个容器。我认为最干净的事情就是总是将东西包裹在容器内。

如果你不想添加这个容器，你可以在加载web之后执行一些JQuery（不添加额外的html）。为此，您应该include jquery

window.onload = function(){
    $('#nav').height($('#content').height());
}

我在你的JSFiddle中尝试了这个，它似乎做了你想做的事。

否则，您可以尝试使用一些已经制作的侧导航栏。不要试图重新发明轮子，如果其他人已经完成它，它可以节省你很多时间。 This是我在我的一些网站上使用的一个很好的

使侧导航与内容具有相同的高度

2 个答案: