1

在我的布局中，我有一个贯穿整个页面的标题。下面是左侧的侧面导航栏。然后我在右边有一个内容容器。我希望导航栏向下延伸到我的页面底部，并且容器一直延伸到右侧。

我将如何实现这一目标？

#navigation {
    background: url(img/navigation_bg.png) repeat-y;
    width: 322px;
    margin: 0px;
    padding: 0px;
    float: left;
    overflow: auto;
    text-align: center;
}

#navigation ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#navigation ul li {
    background: url(img/nav-item_bg.png) repeat-x;
    height: 53px;
    line-height: 53px;
    font-weight: bold;
    margin-right: 1px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #333;
}

#navigation ul li a:link, #navigation ul li a:visited, #navigation ul li a:active {
    color: #2a2a2a;
    font-weight: bold;
    font-size: 12pt;
    text-decoration: none;
}

#navigation ul li a:hover {
    background: #3399cc;
    color: #66ccff;
    font-weight: bold;
    font-size: 12pt;
    text-decoration: none;
    width: 321px;
    height: 53px;
    display: block;
}

#content-wrapper {
    float: left
    margin: 25px 25px 0px 25px;
    overflow: hidden;
}
4

1 回答 1

1

如果我理解正确你想要这样的东西：http: //jsfiddle.net/sHdTX/1/

首先你需要将你的 body 和 html 设置为 100% 的高度，

然后你可以使用 calc CSS 来设置导航栏的高度

height: -webkit-calc(100% - 40px);

Calc 可以在现代浏览器中运行，这是我不使用图像和 JS 的唯一方法。

于 2013-09-09T00:05:45.423 回答