35

数行のコンテンツしかないページがあります。フッターを一番下に押し込みたい。

<div id="footer"></div>

使いたくない

#footer
{
    position:fixed;
    bottom:0;
}

別名スティッキーフッター

これはjQueryなしで可能ですか？

助言がありますか？

4

8 に答える 8

40

このFlexboxソリューションは、実装がより簡潔ではるかに簡単です。

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

divsの中に必要なものを必ずラップしてくださいbody。

于 2018-06-02T17:52:29.707 に答える
36

2021 年更新 - CSS グリッド

これは CSS Grid を使用したソリューションです。これは、2021 年にそれを行うための最良の方法です。

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}
<body>
    <main>The content</main>
    <footer>Footer</footer>
</body>

古い回答

位置固定を使用しない、 Ryan Faitによる別のスティッキー フッターがあります。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}
于 2013-05-21T20:45:43.463 に答える
6

Steve Hatcher によるスティッキー フッター ソリューションを試す

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/
于 2013-11-29T21:23:37.400 に答える
0

最初にすべてのメイン コンテンツを div 要素でラップし、「ラッパー」のクラスを指定します (または、任意の名前を付けます)。

HTML:

<body>
    <div class="wrapper">
        <h1>Main Content</h1>
    </div>
    <footer>
        <p>Footer Content</p>
    </footer>
</body>

ここで、フッターの高さを指定してください。

次に、calc() 関数を使用して、ラッパーの高さをビューポート (ディスプレイ) の高さからフッターの高さを引いた値に設定します。

.wrapper {
    min-height: calc(100vh - 50px);
}
footer {
    height: 50px;
}

ここで、ラッパー コンテンツに余分なマージンがある場合は、それを反映するために、ビューポートの高さから差し引くピクセルの量を増やす必要があります。それ以外は、これは非常に簡単で迅速な修正です。JavaScript は不要で、CSS ルールは 2 つだけです。

于 2021-11-13T21:08:10.180 に答える