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 に答える