css - 如何使元素垂直或水平拉伸(stretch)到剩余的高度或宽度？

Question

在我的布局中，我有一个横跨整个页面的页眉。在其下方是左侧的侧边导航栏。然后我在右边有一个内容容器。我希望导航栏向下延伸到页面底部，容器一直延伸到右侧。

我将如何实现这一目标？

#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;
}

Answer 1

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

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

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

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

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