9

CSS レイアウトでスティッキー フッターを設定するのに苦労しています。http://www.cssstickyfooter.com/のアイデアを取り入れようとしましたが、div のコンテンツの高さが十分でない場合、フッターがページの下部に留まりません。

css ファイル:

* {
 margin:0;
 padding:0;
 } 

body {
 height:100%; 
 margin:0px; 
 padding:0px;
 }

#wrap {
 min-height: 100%;
 }

#container {
 overflow:auto;
 padding-bottom: 150px;
 text-align:left;
 width:800px;
 margin:auto;
 }

#header {
 height:240px; 
 margin-top:20px;
}

#navigation {
 float:left; 
 width:800px; 
 margin-top:20px;
}

#content-container {
 float:left;
 width: 800px;
}

#left {
 clear:left; 
 float:left: 
 width:480px; 
 height: auto;
 margin: 20px 0px 20px 0px;
 padding: 20px 10px 20px 10px;
}

#right {
 float:right; 
 width:275px; 
 height:auto;
 margin: 20px 0px 20px 0px;
 padding: 20px 10px 20px 10px; 
}

#footer {
 position: relative;
 clear:both;
 height:150px;
 margin-top: -150px;
}

#columns {
 width:800px;
 height:150px;
 margin:auto;
}

#colleft {
 float:left;
 width:400px;
 height:150px;
}

#colright {
 float:right;
 position:relative;
 width:260px;
 height:150px;
}

html ファイル:

<div id="wrap">

    <div id="container">

        <div id="header"></div>

        <div id="navigation">

            <div id="lang"></div>

        </div>

        <div id="content-container">

            <div id="left"></div>

            <div id="right"></div>

        </div>

    </div>

    <div id="footer">

        <div id="columns">

            <div id="colleft"></div>

            <div id="colright"></div>

        </div>
</div>
4

4 に答える 4

10

私はあなたが行方不明だと信じています

html { 高さ: 100%; }
あなたのCSSから。

于 2012-04-26T17:37:25.377 に答える
3

position: fixed の使用を検討しましたか?

#footer { position: fixed; bottom: 0px; height:150px; }

あなたの例が機能しない理由は、#footer が #wrap の内側にあるためです。その CSS を使用すると、#footer はラップの外側にある必要があります。最小高さを 100% に設定しているラップであるためです。負のマージンを使用してフッターが上に引っ張られています。

html タグが機能するには、100% の高さも必要です。

要約すると、#footer はネストできず、html には height: 100%; が必要です。

例はこちら --- http://jsfiddle.net/CK6nt/

それが役立つことを願っています! ローリー

于 2012-04-26T17:45:46.410 に答える
0

あなたのフッタークラスで：

#footer {
position: relative;
clear:both;
height:150px;
margin-top: -150px;
}

クラスが次のようになるように変更position: relative;します。position:fixed

#footer {
position: fixed;
clear:both;
height:150px;
margin-top: -150px;
}
于 2012-04-26T17:46:25.037 に答える