0

私はそこでページに取り組んでいます：

私は初心者で、そこでチュートリアルに従いました：http: //ryanfait.com/resources/footer-stick-to-bottom-of-page/

フッターは下部にありますが、ページの高さが本来よりも高いようで、ブラウザにスクロールバーがあります。理由は誰でもわかりますか？！

4

4 に答える 4

0

ボックスモデルでカウントする必要があるがあり<footer>ます。padding-topしたがって、ラッパーの実際のマージンの下部は、フッターの高さとパディングの両方をカウントする必要があります。詳細については、htmlボックスモデルを調べてください。きっと楽しいでしょう:)また、Chrome開発者ツールまたはFirefoxFirebugを使用して学習プロセスをスピードアップしてください

于 2012-12-11T11:08:51.317 に答える
0

リンクが開きません。しかし多分あなたは次のようなことをすることができます

body {
  height: 100%;
  position: relative;
}
.footer {
  position:absolute;
  left: 0;
  bottom: 0;
}
于 2012-12-11T11:09:53.227 に答える
0

余分な高さは、＃footer-containerのパディングトップ、＃footerの境界、そして最も重要なのは＃masthead-containerのマージンから来ているようです（これを＃content-containerのパディングに変更すると修正されるようです）。

それらすべてを取り除くと、スクロールバーがなくなります。

于 2012-12-11T11:10:16.837 に答える
0

私はあなたが書いたスタイルにいくつかの変更を加えました。#footer用に記述されたコードを置き換えるだけです。

 #footer {
    background-color: white;
    border: 1px solid #D2CECE;
    border-radius: 5px 5px 0 0;
    box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, 0.2);
    clear: both;
    height: 200px;
    margin-bottom: 0;
    margin-left: 193px;
    position: fixed;
    width: 960px;
 }

左マージンを193pxに設定しました。これは調整が必要です。にすべてのマークアップを含めるには、メインコンテナdivを追加する必要があります。お気に入り

   <body>
       <div id="main">
           <!-- all the markup (HTML code) -->
       </div>
  </body>

したがって、「＃main」にスタイルを適用することで、すべての包含中心を揃えることができ、中心にするために左または右のマージンを与える必要はありません。

于 2012-12-11T11:22:35.440 に答える