1

CSS Sticky Footerで遊んでい ますが、問題が発生しています...

* { margin: 0; }

すべてのDIVマージンをリセットするように設計されていますが、これは私がやりたいことではありません。すべてのページのテキストは押しつぶされており、現在は余白がありません。

必要なすべての要素で定義しようとしましたが、成功しませんでした。

div.wrapper, div.push, div.footer { margin: 0; }

スティッキーフッターによる必要な要素のみのマージンが0になり、残りはそのままになるように、どうすればバイパスできますか？

4

4 に答える 4

1

* CSS を削除し、HTML を次のように変更します。

html, body {
    height: 100%;
    margin: 0;
}

.footer * {
    margin: 0;
}
于 2013-01-04T20:22:40.837 に答える
1

わかりません..なぜスティッキーフッターを使用するのですか。このようなcssテーブル構造を作成してみてください。人々は CSS テーブルを過小評価しています! 流動的なデザインを作成するのに素晴らしいことがあります..

#wrapper { display: table; height: 100%; width: 1000px; }
#wrapper > header, #wrapper > footer { display: table-row; min-height: 100px; }
#main { height: 100%; } 

<div id="wrapper">
  <header>
    <h1>I'm a header!</h1>
  </header>
  <div id="main">

  </div>
  <footer>
    <p>I'm a footer!</p>
  </footer>
</div>

この CSS の例では、他の要素は影響を受けず、フッターとヘッダーの両方が高さを維持しますが、中間セクションは流動的に残りのスペースを埋めます。

table-cell も見てください。流動的なメイン セクションを備えたソリッドな左側のような水平構造を可能にします。

于 2013-01-04T20:40:40.520 に答える
0

また、フォッターのテキストを修正するには、次のCSSを編集できます。

font: 0.8em helvetica,arial,sans-serif;

style.cssの50行目

.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 700px;
padding: 0;
color: white;
font: 0.8em helvetica,arial,sans-serif;
text-align: center;
}
于 2013-01-04T20:27:08.190 に答える
0

そんなに簡単に作成できるのに、なぜ既成のスティッキー フッターを使うのでしょうか? 試す：

<footer><span>Footer Content</span></footer>

次の CSS を使用します。

footer{    
    position:fixed;
    bottom:0px;
    height:30px;
    width: 100%;
    z-index: 9999;
    color: #595959;
    font-size: 9pt;
    text-align: center;
}
于 2013-01-04T20:34:52.327 に答える