0

中央にラップ div と中央にスティッキー フッターがある HTML5 ページを作成しようとしています。ここに私のHTMLがあります：

<body>
  <div id="wrapper">
    wrapper
  </div>
  <footer>
    this is footer
  </footer>
</body>

そして、これは私のCSSです:

#wrapper {
width:800px;
height:100%;
padding:5px;
margin:0 auto;
background-color:#fff;
border-radius:10px 10px 0 0;
box-shadow:0 1px 10px 3px #666;
}

footer {
background-color:#060318;
color:#3cc9e7;
width:800px;
padding:5px;
position:fixed;
bottom:0;
}

そして、これは私が得る結果です: ここに画像の説明を入力

それらの両方を中央に配置し、フッターを固定するにはどうすればよいですか?

4

2 に答える 2

1

それが最善の解決策かどうかはわかりませんが、div内部にa を作成して、footerこの div を中央に配置できます。

<footer>
    <div>this is footer</div>
</footer>

CSS は次のとおりです。

footer {
    position:fixed;
    bottom:0;
    left: 0;
    right: 0
}

footer div {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin:0 auto;
}

結果を表示する jsfiddle は次のとおりです: http://jsfiddle.net/xRzQy/

于 2012-11-27T15:50:45.027 に答える
1

position: fixedによく似てposition: absoluteいます。中央に配置するには、JavaScript を使用するか、ラッパー要素を追加する必要があります。

<div id="footerwrapper">
  <footer>
    this is footer
  </footer>
</div>​

CSS:

#footerwrapper {
    width: 100%;
    position: fixed;
    bottom: 0;
}
footer {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin: 0 auto;
}​

http://jsfiddle.net/mblase75/JYYX7/

于 2012-11-27T15:51:17.580 に答える