福音は、イエス・キリストの死、埋葬、復活です。 福音を説明すると、天国へ行く方法が説明されています。窓の下にあるフッターに背景を塗りつぶしたり、フッターを描く方法
イエスは、私たちの罪のために罰金を払うことができる唯一の人だから（イエスは誰もが罪人であり、誰もが邪悪であり、誰もが永遠の地獄に値する）、死ぬ必要がありました。
このウェブサイトは正常に開発されましたが、現在オンラインではありません。しかし、waybackmachine.orgでも利用可能です。
私のフッタは常に私のウェブサイトのコンテンツの一番下にあります。フッタを押し下げるのに十分なコンテンツがあれば素晴らしいです。しかし、フッタを少なくともウィンドウの一番下まで押し込むのに十分なコンテンツがない場合、背景はひどく見えます。ここで十分なコンテンツがある場合にを何が起こるかである：ここでは
は十分なコンテンツが存在しないときを何が起こるかです：
私が背景ストレッチを作るにはどうすればよい
フッターがどこにあるの？ 私はではありません。は、スティッキーフッターの作り方を尋ねています。スティッキーフッターがどこにあるのかを知るために、コンテンツの背景を塗りつぶす方法を尋ねています。 - https://heavensgospel.org/aboutそれは今働いている
<body>
<nav> <!-- top nav stuff here --> </nav>
<div class="boxshadow-outer-hack">
<div class="boxshadow-outer">
<div class="boxshadow-hack">
<div class="boxshadow-around-content">
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">
<b>Title</b>
</h1>
<h2 class="text-center">Second Title</h2>
<!-- Content goes here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<nav> <!-- footer nav stuff here --> </nav>
<body>
Here is an example when there isn't enough content to fill:：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
/* This makes the bottom footer sticky. */
body {
/* Margin bottom by footer height */
margin-bottom: 51px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 51px;
margin:0;
padding:0;
}
/* box shadow settings. Don't pay much attention to this. */
.boxshadow-hack {
text-align: center; /* This hack makes the child div (which is .boxshadow-around-content) centered. Because the display is inline-block, it is auto left adjusted normally. */
}
.boxshadow-around-content {
text-align: left; /* This reverses the text-align:center hack that is used to center this div. We will make adjustments to this class depending on the screen width using media queries, because a box shadow doesn't look good if it's too crammed. */
display: inline-block;
background-image:none;
background-color: #FCFCFC;
}
.boxshadow-outer {
text-align: left; /* This reverses the text-align:center hack that is used to center this div. We will make adjustments to this class depending on the screen width using media queries, because a box shadow doesn't look good if it's too crammed. */
display: inline-block;
width:100%;
}
.boxshadow-outer-hack {
text-align: center; /* This hack makes the child div (which is .boxshadow-around-content) centered. Because the display is inline-block, it is auto left adjusted normally. */
width:100%;
background-image: url("http://i609.photobucket.com/albums/tt178/imanono/cream_dust_zpsqualmncn.png");
}
.boxshadow-hack {
margin-bottom: 40px;
margin-top: 40px;
}
.boxshadow-outer {
padding: 0 15px; /* This changes how far away the box shadow is from the website's content. */
-webkit-box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
-moz-box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
}
.boxshadow-around-content {
padding: 5 35px; /* This changes how far away the box shadow is from the website's content. */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
}
はここに私のhtmlです：
は、ここに私のCSSです。どのように私はそれを作ったの更新を見てください。
Here is an example when there is enough content to fill: https://heavensgospel.org
私はjsfiddleを使用するつもりだったが、それは正しくスティッキーフッターのための私のコードを解釈することはできません。自分のコードをコピーしてローカルのhtmlファイルに貼り付けて、自分の状況を確認したり、自分のリンクに行ってください。
更新 Veikoの回答は間違いなく非常にサポートされていません。 c01gat3の答えは正解で広くサポートされていますが、ハッキーです。私は私の意見では、それほどハッキーではない方法を発見しました（それはまだハッキーですが、悩まされています）。 display：tableをレイアウトとして使用し、中間のコンテンツセルに対してheight：autoを使用して、head navbarとsticky footerの間の空白スペースを埋めます。私はこれで自分自身を思いついたわけではありません。
<style>
#tablecontainer{
width: 100%;
height: 100%;
}
.table-panel {
display: table;
}
.table-panel > div {
display: table-row;
}
.table-panel > div.fill {
height: auto;
}
/* Unimportant styles just to make the demo looks better */
#top-cell {
height: 50px;
background-color:aqua;
}
#middle-cell {
/* nothing here yet */
background-color:purple;
}
#bottom-cell {
height:50px;
background-color:red;
}
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
}
</style>
<body>
<nav> <!-- top nav stuff here --> </nav>
<div class="boxshadow-outer-hack">
<div class="boxshadow-outer">
<div class="boxshadow-hack">
<div class="boxshadow-around-content">
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">
<b>Title</b>
</h1>
<h2 class="text-center">Second Title</h2>
<!-- Content goes here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<nav> <!-- footer nav stuff here --> </nav>
<body>
ここでは、固定コンテンツのフッターがある空白スペースを埋めるために、中心のコンテンツを取得するための更新された方法を紹介します。 https://jsfiddle.net/uzfcvzde/
こんにちは、あなたは私の質問を誤解しました。あなたがスクリーンショットを見ると、私はすでにべたついフッターを完璧に働いています。私はコンテンツの背景を上のナビゲーションバーとフッターの間の空白のスペースに埋める方法を尋ねています。 @BramVanroy –
私は参照してください。引っ込めを閉じるために投票してください。しかし、単に 'body'の背景を使うのはなぜですか？また、IE6のサポートは狂気です。もしあなたが本当に必要なのであれば、古くなったブラウザが新しいものと全く同じように見えない（例えばボックスシャドーなし）が、コアの機能と情報はまだ存在する、優雅な劣化を考慮する。 –