2

div (サイドバー) をページの一番下まで伸ばしたいです。「height: 100%;」を追加する必要があることはわかっています。それをするために。

しかし、height: 100%; を追加すると、コンテンツがサイドバーよりも少ないページではサイドバーの高さがカットされ、サイドバーのコンテンツが見えなくなります。

これは目次ページです。すべてが私の思い通りに見えます。

これはサンプルページです。サイドバーがカットされていることに注意してください。

CSS:

#menu-container {
    background-image: url('floral.png');
    width: 300px;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    overflow: hidden; 
    position: absolute;
}

#menu {
    background-image: url('menubg.png');
    width: 220px;
    margin: 0;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 20px;
    color: #e8e8e8;
    height: 100%; 
}

#content {
    padding: 0px 0px 30px 325px;
    width: 1000px;
    display: inline-block;
    vertical-align: top;
}

前もって感謝します!

* @Ritabrata ゴータム *

CSS の変更により 2 つ目の問題は解決しましたが、短いページではサイドバーがカットされた状態に戻っています。

今、家を出ていますので、今夜中にはお返事できると思います。ご協力いただきありがとうございます。

4

2 に答える 2

0

親コンテナー (#container、body、html) が height:100%; であることを確認してください。同じように。

個人的には、次のようにします (サイト レイアウトの残りの部分で許可されている場合)。

#menu、#menu-caontainer および body に別々の背景を作成する代わりに、次のように body に背景を作成し ます: body は背景であり、下に伸びる/繰り返されます。

于 2013-08-16T13:08:24.733 に答える