web-dev-qa-db-ja.com

HTML / CSS：本文とフッターの間の固定マージンを取得する方法

私はCSSを初めて使用し、ページのメインコンテンツ（サイドバー/セクション）とフッターの間に常に固定マージン/スペースがあるようにページを設定しようとしています（例：120px）クロスブラウザで動作するはずです。
また、ページにコンテンツが非常に少ない場合、footerは常に（可視）画面の下部に常に表示される必要があります。

クラス"footer"、incl。を適用して、複数回試行しました。以下、ただしマージンは常に無視されます。

私のHTML構造（簡略化）：

<!DOCTYPE html>

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- ... -->
        </head>
        <body>
            <nav>
                <!-- ... -->
            </nav>
            <section id="sidebar">
                <!-- ... -->
            </section>
            <section id="main">
                <!-- ... -->
            </section>
            <footer class="footer">
                <div>Some text</div>
            </footer>
        </body>
    </html>

マイCSS：

.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom
}
.footer:before {
    clear: both;
    display: block;
    height: 120px;
    min-height: 120px;
}

誰かがこれを手伝ってくれる？
また、私のHTMLに関して何か変更が必要な場合は、私にもお知らせください。

事前に感謝、マイク

htmlcssfootersemanticsmargins
8
keewee279

これは役立つはずです：

html, body {
    height: 100%;
}
body {
    margin:0px;
    padding: 0px;
}
.wrap {
    height: auto;
    margin: 0 auto -80px; /* footer height + space */
    min-height: 100%;
    padding: 0 0 80px; /* footer height + space */
    box-sizing: border-box;
    overflow: auto;
}
.footer {
    background-color: #111111;
    color: #eeeeee;
    border-top: 1px solid red;
    height: 60px;  /* footer height */
    padding-top: 20px;
    display: block;
    margin-top: 20px; /* space between content and footer */
    box-sizing: border-box;
    position: relative;
    width: 100%;
}
<body>
    <div class="wrap">
        <nav>
            <!-- ... -->
        </nav>
        <section id="sidebar">
            <!-- ... -->
        </section>
        <section id="main">
            <!-- ... -->
            
        </section>
    </div>
    <footer class="footer">
        <div>Some text</div>
    </footer>
</body>
5
AndreiDMS

「：before」を使用する理由

CSSは次のようになります。

.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 120px;
}

この例を試してください（私には問題ありません）。機能しない場合は、css resetを使用してください。

<!DOCTYPE html>

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- ... -->
        </head>
        <body>
            <nav style="background:grey;height:100px;">
                <!-- ... -->
            </nav>
            <section id="sidebar" style="background:green;height:100px;">
                <!-- ... -->
            </section>
            <section id="main" style="background:red;height:100px;">
                <!-- ... -->
            </section>
            <footer class="footer" style="background:blue;">
                <div>Some text</div>
            </footer>
        </body>
    </html>

<style>
.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 120px;
}

</style>
2
Mark

本文とフッターの間にマージンを追加するには、これをフッターセクションのスタイルに追加するだけです：padding:20px 0px 0px 0px;

フッターを一番下に配置するのはより複雑です。 cssに次のようなものを試してください：

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

#wrapper{              /*create a div around whole html body
    min-height:100%;
    position:relative;
}

#main{
    padding-bottom:100px; /* Height of the footer element */
}

#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    color: #333;
}
2
user4477886

マージン0pxでボディにスタイルを与えるだけです。

  body{
      margin: 0px;
  }
0
Muhammad Irfan