0

テンプレートの作り方を練習しました。私の最初の問題は、コンテンツが画面全体を埋めるのに十分な長さでない場合に、画面の下部にフッターを貼り付ける方法です。このチュートリアルhttp://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-pageを使用して解決しました

もう 1 つの問題は、サイドバーをフッターまで埋める方法でした。

ここにhtmlがあります：

<div id="wrapper">
    <div id="header">
        header here
    </div>
    <div id="container">
        <div id="sidebar">
            sidebar here
        </div>
        <div id="content">
            content here
        </div>
    </div>
    <div class="cls"></div>
    <div id="footer">
        footer here
    </div>
</div>

ここにCSSがあります：

body{
    padding: 0;
    margin: 0;
}
.cls{
    clear:both;
}
#wrapper{
    min-height: 100%;
    position: relative;
}
#header{
    background-color: #DDDDDD;
    height: 60px;
}
#container{
    padding-bottom: 60px;
    width: 100%;
}
#sidebar{
    background-color: #87CEFA;
    width: 220px;
    float: left;
    padding-right: 20px;
}
#content{
    width: 75%;
    float:right;
}
#footer{
    background-color: #CCCCCC;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 60px;
}

画像リンクを開くと、左側にあるのが今持っているものです....結果を右側にあるものにしたい http://www.4shared.com/photo/CoXrUWP2/template.html

4

2 に答える 2

0

これを実現するには、主に 3 つの方法があります。

1 つはテーブル レイアウトを使用することですが、これには注意が必要です。

2 つ目は、#container 要素に背景を設定することです。Photoshop で、220 ピクセルのサイドバーを含む画像を作成し、そのスライスを使用して、#container 要素の高さ全体にサイドバーを拡張した外観を与えます。

3 つ目は、JQuery を使用して #sidebar 要素のサイズをコンテナーの高さに合わせることです。次のようにします。

$("#sidebar").height( $("#container").height() );
于 2012-05-11T05:23:25.890 に答える