コーディングしたのにフッターが下にくっつきません
-
03-07-2019 - |
質問
サイトをオンラインにする必要があるため、当面はフッターを削除しました。ということでリンクも消えてしまいました。
ご覧のとおり (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;
}
または、長い話を短くすると、次のようになります。私は与えられた指示に従いました ここ.
解決
そうですね。#size を 100% 以内にして、ラップからパディングを削除し、次の内容を #content に追加します。
overflow:auto;
padding-bottom:30px;
そうすればあなたのリンクはFFで機能します
他のヒント
指示に十分従わなかった。 マシューのレイアウト
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
はコンテナにposition:relativeがあり、フッターにはposition:absoluteがあります。それは別の内部に1つを置きます。フッターのサイズのpadding-bottomを予約することにより、コンテナーにはフッター用に予約されたスペースがあることに注意してください。したがって、レイアウトはフッターの高さが固定されている場合にのみ機能します。
botttom:0要素を使用して絶対位置に配置すると、最も近い相対的に配置された親の下部に配置されます。存在しない場合は、代わりにビューポートが使用され、それがレイアウトで発生します。
フッターdivはラップdivの子ではありません。
これはどうですか?
パディングを本体の下部から#wrapの下部に移動します。フッターは、「ページ」の下部から常に30ピクセルです。そのパディングのため。 #wrapに配置することで、#wrapの内容がフッターの後ろに移動するのを防ぎます。
<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>
これは私のために働いた。
IMO、IEスターハックが問題の原因です。 IEのハックを変更してみてください:
*html #wrap {
...
}
このサイトには、デモ用の非常に優れたテクニックがあります: http://www.themaninblue。 com / experiment / footerStickAlt /
この問題には何か他のものがあるはずです。上記のすべての方法はすべて、私のサイトではなく、異なるサイトで機能します。
これは私のページのソースであり、関係のないものは削除されます(コンテンツやもの):
<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%未満の場合、フッターは正しい位置でOageの下部に貼り付けられます。そのため、画面いっぱいに表示されない場合。
コンテンツがページの100%を超える場合、フッターはコンテンツの途中にあるため、スクロールしてすべてを表示する必要があります。