0

「スティッキーフッター」の作成に関して見つけられるすべてのものをグーグルで検索して読みましたが、何らかの理由で正しく機能させることができません。html/body div、メイン コンテンツ div、フッター div の CSS コードは次のとおりです。

body, html {
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
height: 100%;
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial;
font-size: 1em;
color: #666666;
background-color: #EDF5FC;}

#main {
position: relative;
top: 380px;
width: 90%;
height:100%;
min-height: 100%;
margin: 0px 5% -20px 5%;
z-index: 10;
padding-top: 0px;
padding-bottom: 20px;
overflow:scroll;}

#footer {
clear:both;
position:fixed;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top: -20px; /* negative value of footer height */
width:98%;
height:20px;
padding-top:3px;
background: #0E28B1;
text-align: center;
color: #ffffff;
font-size: .7em;
font-weight:bold;
z-index:1;}

フッター Div がメイン div の外側にあります (サイトのメイン コンテンツはメイン div の内側にあるので、それを閉じてフッター div を配置します)。固定位置と margin-bottom を使用して、下部に貼り付けることができます。 0 ですが、コンテンツのスクロール バーが表示されません。

これはまったく機能していません。私は何を間違っていますか？

4

1 に答える 1

1

私はついに私のために働く解決策を見つけました！私はこのウェブサイトを見つけました：http：//boagworld.com/dev/fixed-footers-without-javascript/そして、フッターテキストが垂直方向と水平方向の両方でうまく中央に配置されるようにコードを少し変更し、ページのトップを追加しましたメイン（コンテンツ）divの高さ 3番目の「#Wrapper」divがすべてを囲んでいないと、これは正しく機能しないと思います。同じ問題を抱えている人のために、ラッパー、メイン、フッターのcssを次に示します。

#wrapper {
display: block; 
position: absolute; 
min-height: 100%; }

#main {
display: block;
top: 400px;
width: 90%; 
margin-bottom: 20px; }

#footer {
position: fixed; 
display: block; 
bottom: 0; 
height: 20px; 
background: #0E28B1;
width: 98%;
margin-right:auto;
margin-left:auto;
font-size: .7em;
font-weight:bold;
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial;
color: #ffffff;
text-align:center;
z-index:2;
padding-top:3px;}

フッターをコンテンツテキストの上に保持するには、フッター1ではなく2でz-indexを作成する必要がありました。しかし、今では機能します。この解決策を見つける前に、私は非常に多くのWebサイト（これを含む）を検索していたので、これが誰かに役立つことを願っています。

于 2012-09-17T13:16:12.310 に答える