web-dev-qa-db-ja.com

コンテンツの少ないページでフッターを最下部に強制する

コンテンツが数行しかないページがあります。フッターを下に押してほしい。

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

使いたくない

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

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

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

助言がありますか？

cssfootersticky
23
pom4ik

別の sticky footer by 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 */
}
28
Vinícius Moraes

これは、メインのラッパー要素の外側にフッターを配置する必要がないソリューションです。これは、ほとんどの人がページを構成する方法です。

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

.wrapper {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 1em; /* Height of footer */
  min-height: 100%;
}

header {
  background-color: #cff;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
}
<div class="wrapper">
  <header>I am the header.</header>
  <article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
  <footer>I am the footer.</footer>
</div>

説明

ラッパー要素は、ビューポートの高さの100％を満たします。 （html要素とbody要素の高さを設定したくない場合は、ラッパーに100vhを使用することもできます。）ラッパーには、フッター用のプレースホルダーを作成するための下部パディングもあります。

フッターはラッパーの下部に絶対に配置され、ラッパーの下部パディングによって作成されたプレースホルダーに配置されます。

これは、ページにスクロールバーがない場合、フッターが一番下に配置されることを意味します。ただし、スクロールバーを表示するのに十分なコンテンツがある場合、フッターはコンテンツの下にプッシュダウンされます。

9
Thomas Higginbotham

この 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で囲むようにしてください。

7
Chidozie Nnachor

Steve HatcherによるSticky Footer Solutionをお試しください

/*  
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]-->

*/
5
Konstantin Tarkus

フッターのサイズがわからない場合にこれを行う別の方法は、javascriptとcssを使用することです

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

#footer{
    background-color: #292c2f !important;
    position:absolute;bottom:0px;
}

およびJavascript部分

$(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});

フッタータグの前にタグのmin-heightを設定するだけで、別のアプローチでこれを簡単に行うことができます。

.the-tag-before-footer{
     min-height:30%;
 }
0
Afshin Izadi