マークアップの右と左の両方のdivをクリアするフッター付きのシンプルな2列のレイアウトがあります。私の問題は、すべてのブラウザーでフッターがページの下部に留まらないことです。コンテンツがフッターを押し下げると機能しますが、常にそうであるとは限りません。
マークアップの右と左の両方のdivをクリアするフッター付きのシンプルな2列のレイアウトがあります。私の問題は、すべてのブラウザーでフッターがページの下部に留まらないことです。コンテンツがフッターを押し下げると機能しますが、常にそうであるとは限りません。
回答:
スティッキーフッターを取得するには:
持っている<div>
とclass="wrapper"
あなたのコンテンツのために。
右の前に終値</div>
のwrapper
場所
<div class="push"></div>
。
右後のクロージング</div>
のwrapper
場所
<div class="footer"></div>
。
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
おそらく、フッティを移動するための最も明白でハックのない方法は、新しいcssビューポートユニットを利用することでしょう。
たとえば、次の簡単なマークアップを見てみましょう。
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
ヘッダーの高さが80pxで、フッターの高さが40pxである場合、コンテンツdivに関する1つのルールでスティッキーフッターを作成できます。
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
つまり、コンテンツdivの高さを、ビューポートの高さからヘッダーとフッターの合計の高さを差し引いた値の少なくとも 100%にします。
それでおしまい。
...そして、同じコードがコンテンツdiv内の多くのコンテンツでどのように機能するかを次に示します。
注意:
1)ヘッダーとフッターの高さがわかっている必要があります
2)古いバージョンのIE(IE8-)およびAndroid(4.4-)は、ビューポートユニットをサポートしていません。(カニユーズ)
3)昔々、webkitは計算ルール内のビューポート単位に問題がありました。これは確かに修正されました(ここを参照してください)ため)、問題はありません。ただし、何らかの理由でcalcの使用を避けたい場合は、負のマージンとボックスサイズによるパディングを使用して回避できます-
そのようです:
display: flex
フィリップウォルトンのスティッキーフッターに触発されたソリューション。
このソリューションは、次の場合にのみ有効です。
これはflex
ディスプレイに基づいており、flex-grow
プロパティを利用して、要素を高さまたは幅のいずれかに成長させることができます(がまたはに設定されている場合)flow-direction
column
row
容器に余分なスペースを占有するように、それぞれ)。
我々はまた、レバレッジしようとしているvh
ユニット、1vh
されるように定義します:
ビューポートの高さの1/100
したがって、その高さは100vh
、要素にビューポートの高さ全体に及ぶように伝える簡潔な方法です。
これはあなたのウェブページをどのように構成するかです:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
ページの下部にフッターを固定するには、ページの下部にあるフッターを押すのと同じくらいに、本文とフッターの間のスペースを大きくする必要があります。
したがって、レイアウトは次のようになります。
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
JSFiddleで遊ぶことができます。
Safariにはプロパティの実装に欠陥があるためflex-shrink
、コンテンツを表示するために必要な最小の高さを超えて項目を縮小できることに注意してください。この問題を解決するには、設定する必要がありますflex-shrink
に0にプロパティを明示的に.content
し、footer
上記の例では:
.content { flex-shrink: 0; }
.footer { flex-shrink: 0; }
.Site-content
要素ではと同じ役割を果たしますspacer
。それは別様に呼ばれています。
.Site-content
アナログがあり.content
ます。しかし、気にしないで、gcedoがそれについていくつかの特定のアイデアを持っている場合、推測する必要はない
position: absolute
以下を使用してページの下部にフッターを配置できますが、フッターに隠れないように、2つの列が適切でmargin-bottom
あることを確認してください。
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
0px
、私が見たすべてのスタイルシートのすべてのはちょうどであるはず0
です。
これは、魅力のように機能するjQueryのソリューションです。ウィンドウの高さが本体の高さより大きいかどうかをチェックします。そうである場合は、フッターのマージン上部を変更して補正します。Firefox、Chrome、Safari、Operaでテスト済み。
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
フッターに既にマージン上部(たとえば50ピクセル)がある場合は、次の最後の部分を変更する必要があります。
css( 'margin-top', height_diff + 50 )
CSSを次の#footer
ように設定します。
position: absolute;
bottom: 0;
その後、追加する必要がありますpadding
か、margin
あなたの下へ#sidebar
と#content
の高さが一致する#footer
とき、または、それらが重なると、#footer
それらをカバーします。
また、私が正しく覚えている場合、IE6はbottom: 0
CSSに問題があります。IE6のJSソリューションを使用する必要がある場合があります(IE6が気になる場合)。
@gcedoと同様のソリューションですが、フッターを押し下げるために中間コンテンツを追加する必要はありません。margin-top:auto
フッターに追加するだけで、高さや上のコンテンツの高さに関係なく、ページの下部にプッシュされます。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}
<div class="content">
some content here
</div>
<footer class="footer">
some content
</footer>
.content
flex: 1 0 auto;
、それを成長可能で揺れ動かさないようにすることmargin-top: auto;
ですが、フッターのスタイリングを含む素晴らしいトリックであり、「非関連」.content
ではありません。実際には、フレックスは、このアプローチで必要とされる理由は、私は疑問に思う..
display:flex
ても機能しない場合は、通常のブロック要素フローになります
margin:0 auto
センターブロック要素と同様)。ただし、列方向がないため、マージンはありません。上/下で自動。Flexboxには行/列の方向があります;)。これはわずかな違いですが、マージンはフレックスボックス内でも要素を整列するために使用されるため、行方向でもmargin-top / bottom autoを使用して垂直方向に整列できます。詳細については、こちらをご覧ください:w3.org/TR/css- flexbox-1 /#auto-margins
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
main.css:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
出典:https : //www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
私は時々これに苦労しており、それらすべてのdivが相互に含まれているソリューションは厄介なソリューションであることにいつも気づきました。私は少しそれをいじりました、そして私は個人的にこれがうまくいくことを個人的に見つけました、そしてそれは確かに最も簡単な方法の一つです:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
これについて私が気に入っているのは、追加のHTMLを適用する必要がないことです。このCSSを追加して、いつでもHTMLを書くことができます
以来グリッド・ソリューションがまだ提示されていない、ここではわずか2つので、ある宣言のための親要素我々が取る場合、height: 100%
そしてmargin: 0
当然のこと:
html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>
アイテムは、横軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテムの各ペア間の間隔は同じです。最初のアイテムは主開始エッジとフラッシュし、最後のアイテムは主終了エッジとフラッシュします。
絶対配置とz-indexを使用して、次の手順で任意の解像度でスティッキーフッターdivを作成します。
position: absolute; bottom: 0;
希望する高さのdiv
本文をラップするコンテナを作成しますposition: relative; min-height: 100%;
div
にフッターの高さとパディングを足したものに等しいz-index
コンテナより大きく設定しdiv
ます次に例を示します。
<!doctype html>
<html>
<head>
<title>Sticky Footer</title>
<meta charset="utf-8">
<style>
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: green; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<span>hello</span>
</div>
<div class="footer">
<p>This is a test. This is only a test...</p>
</div>
</div>
</body>
</html>
この質問では、私が見た答えの多くは不格好で、実装が難しく、非効率的であるため、私はそれを試して、ほんの少しのcssとhtmlである独自のソリューションを思いつくと思いました
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}
<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>
これは、フッターの高さを設定し、css calcを使用して、ページがフッターの一番下にあるときの最小高さを計算することで機能します。
1つの解決策は、ボックスの最小高さを設定することです。残念ながら、IEではサポートされていないようです(驚き)。
これらの純粋なcssソリューションはいずれも、動的にサイズ変更されるコンテンツ(少なくともfirefoxとSafariでは)で適切に機能しません。テーブルはスタイル付き領域の下部からはみ出す可能性があります。つまり、フォントの色と背景色の両方が白であるため、テーブルの半分を黒のテーマで白にし、半分を完全に白にすることができます。基本的に、themerollerページでは修正できません。
ネストされたdivマルチカラムレイアウトは醜いハックであり、フッターを貼り付けるための100%の最小高さのbody / container divは醜いハックです。
私が試したすべてのブラウザで機能する唯一のスクリプトなしのソリューション:ad(ヘッダー用)/ tfoot(フッター用)/ tbody(任意の数の列のtd)と100%の高さを備えた、よりシンプルで短いテーブル。しかし、これは意味的およびSEOの欠点を認識しています(tfootはtbodyの前に現れる必要があります。ARIAの役割はまともな検索エンジンに役立つ可能性があります)。
複数の人がこの単純な問題への答えをここに上げましたが、自分が間違っていることを理解するまでにどれほどイライラしていたかを考慮して、追加すべきことが1つあります。
前述したように、これを行う最も簡単な方法はそのようなものです。
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
しかし、おそらく通常はデフォルトであるため、投稿で言及されていないプロパティは、位置です:static、bodyタグのです。相対位置は機能しません!
私のワードプレスのテーマはデフォルトのボディ表示を上書きしており、不愉快に長い間私を混乱させていました。
私が知っている古いスレッドですが、レスポンシブソリューションを探している場合は、このjQueryの追加が役立ちます。
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
完全なガイドはここにあります:https : //pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
私は非常にシンプルなライブラリを作成しましたhttps://github.com/ravinderpayal/FooterJS
使い方はとても簡単です。ライブラリを含めたら、次のコード行を呼び出します。
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
上記の関数を異なるパラメーター/ IDで呼び出すことにより、フッターを動的に変更できます。
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
注:-CSSを変更または追加する必要はありません。ライブラリは動的であるため、ページの読み込み後に画面のサイズが変更されても、フッターの位置がリセットされます。このライブラリを作成しました。CSSはしばらくの間問題を解決しますが、ディスプレイのサイズがデスクトップからタブレットに、またはその逆に大幅に変更されると、コンテンツが重複するか、粘着性がなくなるためです。
別のソリューションはCSSメディアクエリですが、このライブラリは自動的に機能し、すべての基本的なJavaScriptサポートブラウザーでサポートされていますが、画面のサイズに応じて異なるCSSスタイルを手動で作成する必要があります。
CSSソリューションを編集:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
表示の高さがコンテンツの長さよりも大きい場合は、フッターが下に固定されます。そうでない場合は、表示するためにスクロールする必要があるため、表示の一番端に自動的に表示されます。
そして、それはJavaScript /ライブラリーよりも優れたソリューションのようです。
フレックスレイアウトは、ヘッダーとフッターの自然な高さに適しています。このフレックスソリューションは最新のブラウザーでテストされ、実際にはIE11で動作します。
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
私にとってそれを表示する最も良い方法(フッター)は下部にくっついていますが、常にコンテンツを覆っていません。
#my_footer {
position: static
fixed; bottom: 0
}
jQuery CROSS BROWSER CUSTOM PLUGIN-$ .footerBottom()
または、私と同じようにjQueryを使用して、フッターの高さをauto
またはに設定しますfix
。好きなように、とにかく動作します。このプラグインはjQueryセレクターを使用するため、機能させるには、ファイルにjQueryライブラリーを含める必要があります。
プラグインを実行する方法は次のとおりです。jQueryをインポートし、このカスタムjQueryプラグインのコードをコピーして、jQueryのインポート後にインポートします。非常にシンプルで基本的ですが、重要です。
それを行うときは、次のコードを実行するだけです。
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
ドキュメント準備イベント内に配置する必要はありません。そのまま正常に動作します。ページが読み込まれたとき、およびウィンドウのサイズが変更されたときに、フッターの位置が再計算されます。
ここにあなたが理解する必要のないプラグインのコードがあります。それを実装する方法を知っているだけです。それはあなたのために仕事をします。ただし、どのように機能するかを知りたい場合は、コードを調べてください。コメントを残しました。
//import jQuery library before this script
// Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target: "footer",
container: "html",
innercontainer: "body",
css: {
footer: {
position: "absolute",
left: 0,
bottom: 0,
},
html: {
position: "relative",
minHeight: "100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
$(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on('load resize', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<div class="content">
<header>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<section>
<p></p>
<p>Lorem ipsum...</p>
</section>
</div>
<footer>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
</footer>
フレックスソリューションを使用してフッターをスティッキーにするまでは問題ありませんでしたが、フレックスレイアウトを使用するようにボディを変更すると、ページレイアウトの一部が変更され、改善されませんでした。最終的に私のために働いたのは:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
これは、https: //css-tricks.com/couple-takes-sticky-footer/のctf0の応答から取得しました
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
}
<body style="height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
固定位置を使用したくない場合や、モバイルで迷惑にフォローする場合は、これまでのところ問題なく機能しているようです。
html {
min-height: 100%;
position: relative;
}
#site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 2px;
background: #32383e;
}
ちょうどにHTMLを設定min-height: 100%;
し、position: relative;
その後、position: absolute; bottom: 0; left: 0;
フッターに。次に、フッターが本文の最後の要素であることを確認しました。
これが他の人にとってうまくいかないかどうか、そしてその理由を教えてください。これらの退屈なスタイルのハックは、私が考えていないさまざまな状況で奇妙な動作をする可能性があることを知っています。