は私<strong>が</strong>を行うことができないものの</p> <p>例...ので、主な解決策が私には適していません、私は下部にフッターを維持する必要がありますが、その高さが可変である下

Question

に可変の高さとフッターをキープ http://www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

誰でも柔軟フッターのためのソリューションを持っていますか？ ありがとう

Answer 1

2014 UPDATE：このレイアウトの問題を解決するための近代的な方法はuse the flexbox CSS modelにあります。これは、すべての主要なブラウザとIE11 +でサポートされています。

---

ここdisplay: table-rowでdiv Sを使用して柔軟な高さのスティッキーフッターのソリューションです：

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 
.content { 
 
    display: table-row; 
 
    /* height is dynamic, and will expand... */ 
 
    height: 100%; 
 
    /* ...as content is added (won't scroll) */ 
 
    background: turquoise; 
 
} 
 
.footer { 
 
    display: table-row; 
 
    background: lightgray; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <h2>Content</h2> 
 
    </div> 
 
    <div class="footer"> 
 
    <h3>Sticky footer</h3> 
 
    <p>Footer of variable height</p> 
 
    </div> 
 
</div>

何に注意する必要がありますが、CSSが文書をレイアウトするために設計されたことがありますWebアプリケーション画面ではありません。 CSS表示：テーブルのプロパティは非常に有効ですが、all major browsersでサポートされています。これは、レイアウトのために構造テーブルを使用するのと同じではありません。

Answer 2

私はあなたが何を理解していると思います。

あなたは、例えばため

..高さのCSSを削除して、もしあなたはまだ何の間隔パディングトップとパディング下でそれを交換する必要があり

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: #6CF; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

Answer 3

#wrapper, #content, #footer { 
    width:100%; 
    height:100%; 
    position: relative; 
} 


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