2

当分の間、フッターを削除しました。サイトをオンラインにする必要がありました。というわけで、リンクも消えました。

ご覧のとおり (FF2 と IE7 の両方)、フッターは画面の下部にありますが、ページ (コンテンツ) の下部にはありません。

私は自分のコードにこれを持っています:

<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

そしてこれはcssで：

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;  /* height of the footer */
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    min-height: 100%;
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
}

または、長い話を短くすると、ここに記載されている指示に従いました。

4

8 に答える 8

4

あなたは指示に注意深く従っていませんでした。マシューのレイアウトの鍵

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

フッターにはposition:absoluteがあり、コンテナにはposition:relativeがあるということです。それはお互いを別の中に置きます。padding-bottom にフッターのサイズを予約することで、コンテナーにフッター用に予約されたスペースがあることに注意してください。そのため、レイアウトはフッターの高さが固定されている場合にのみ機能します。

botttom:0 要素で絶対配置された要素は、最も近い相対的に配置された親の一番下に配置されます。何もない場合は、代わりにビューポートが使用され、それがレイアウトで起こっています。

フッター div はラップ div の子ではありません。

于 2009-01-04T17:09:50.893 に答える
3

これはどうですか？

于 2009-01-04T16:48:00.860 に答える
1

パディングをボディの下部から #wrap の下部に移動します。そのパディングのため、フッターは常に「ページ」の下部から 30px です。#wrap に配置することで、 #wrap の内容がフッターの後ろに隠れるのを防ぎます。

于 2009-01-04T16:55:40.483 に答える
1

そうです、100% 内の #size で、ラップからパディングを取り除き、次を #content に追加します

overflow:auto;
padding-bottom:30px;

その後、あなたのリンクはFFで機能します

于 2009-01-05T12:45:12.923 に答える
0 
    <style type="text/css">
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
}
</style>
<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

これは私にとってはうまくいきました。

于 2009-01-04T16:55:19.533 に答える
0

IMO、IEスターハックが問題を引き起こします。次のように IE のハックを変更してみてください。

*html #wrap {
    ...
}
于 2009-01-04T18:25:33.860 に答える
0

この問題には他に何かがあるに違いありません。上記のすべての方法はすべて、私のサイトではなく、さまざまなサイトで機能します。

これは私のページのソースです。関係のないもの (コンテンツなど) は削除されています。

<body>
    <div id="size"> javascript textsize modifier</div>
    <div id="wrap">

        <div id="top"> logoimage
            <div id="menu">
                <div id="menuwrapper">
                    <ul id="primary-nav">
                        <li> Homelink </li>
                        <li class="menuactive menuparent" class="over"> Link 2
                            <ul>
                                <li> Sublink 1 </li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                        <li class="menuparent" class="over"> Active Link 3
                            <ul>
                                <li> Sublink 1</li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                    </ul>
                </div> <!-- end menuwrapper //-->
            </div> <!-- end menu //-->
        </div> <!-- end top //-->

        <div id="content">
            <div id="newssnippet"></div>
            <div id="roundedright"> <!-- rounded corners //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="right">Random main content</div>
                <!-- 7 divs to create rounded corners //-->
            </div> <!-- end rounded corners //-->

            <div id="logo">Another logo</div>

            <div id="roundedleft"> <!-- rounded corners again //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="left">News content</div> 
                <!-- 7 divs to create rounded corners //-->
            </div>  <!-- end rounded corners //-->
        </div> <!-- end content //-->

        <div id="footer"></div>

    </div><!-- end wrap //-->
</body>

明らかに、冒頭の投稿のリンクから所定のレイアウトに従っています。

次にCSSで、私は持っています：

html {
    height: 100%;
    margin: 0;
    padding: 0;
} 
body {
    background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
    min-height:100%;
}
*html #wrap {     /* IE hack */
    height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent url(images/cms/footer.png) no-repeat bottom center;
    padding: 0;
}
#footer p {
    margin: 0;
    padding: 0;
    padding-top: .7em;
    text-align: center;
}
#footer a {
    text-decoration: none;
}

それはすべての関連するビットでなければなりません...

私は何が欠けていますか？

記録として: コンテンツの高さが 100% 未満の場合、フッターは適切な位置でオレンジ色の下部にくっついています。それで、それが画面いっぱいにならなければ。
コンテンツがページの 100% を超える場合、フッターはコンテンツの途中にあるため、すべてを表示するためにスクロールする必要がある場合。

于 2009-01-04T20:10:25.880 に答える
0

このサイトには、デモ付きの非常に優れたテクニックがあります: http://www.themaninblue.com/experiment/footerStickAlt/

于 2009-01-06T13:39:43.203 に答える