html - 高さ: 100% - 100% ではない?

Question

高さ 100% の要素については、たくさんの質問があります。フッターを抑える方法についても、たくさんの質問があります。さて、これはもう一つ…

サイトを構築していますが、フッターの配置と、ページの高さ 100% の要素に問題があります。マイページは現在こんな感じです。

見つけた可能性のあるほとんどすべてを試しましたが、何も機能していないようです。CSSコードを見ると、フッターの位置と高さの設定が壊れているものはありますか?

Answer 1

CSS スティッキー フッターをチェックしてください

HTML を次のようにします。

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

footerしたがって、あなたの例（あなたのウェブサイト）では、を の外に置きたいと思うでしょうcontainer。ここから、上記のリンクを確認するだけCSSで、DIV が高さいっぱいに拡張されている間、フッターがページの下部に固定されます。

Answer 2

#contentWrapper{
 padding: 0;
 margin-left: 230px;
 height: 100%;
 background-color: #FFFFFF;
 overflow: auto; /*I added this*/
}

#grass {
 background: url("../images/layout/grass.png") repeat-x;
 width: 100%;
 bottom: 59px;
 height: 248px;
 position: fixed; /*Change absolute to fiexed*/
}