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/

首先，您需要将身体和html设置为100％高度，

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

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

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

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

1 个答案: