2
cssstickyfooter.comのようにCSSスティッキーフッタメソッドを実装しようとしています。 （私もRyan Fait'sソリューションを試したが、役に立たない）。液体/流体レイアウトでCSSスティッキーフッターを実装する際の問題
私はtにすべてを従っている、または私は少なくとも私は持っていると思います。私はコンテナdiv（彼らはラップと呼んでいる）、ロゴバー（彼らはそれをヘッダーと呼んでいる）とページdiv（彼らはそれをメインと呼ぶ）を持っています。
私がoverflow:autoを持っていれば、私は本当に短いdivとスクロールバー（yucky）を得ることができます。しかし、私がコメントアウトした場合、私のすべてのコンテンツが表示されますが、divは、overflow:autoがコメントアウトされていない場合と同じサイズであると信じています。
それ以外の場合は、正しく動作します。フッターは下部に留まり、サイズ変更時には短いページ/メインdivで停止します。それを私のコンテンツの一番下に置く方法はありますか？私は私のページ/メインdivの固定された高さを使用することができないことを言及する必要がありますので、divのサイズに基づいてサイズを変更する必要があります。
問題を引き起こしているフッターでも、そうでないかもしれませんが、これを理解する助けを借りることができます。
HTML：
<body>
<div id="container">
<div id="logo">
<div id="home-flower"></div><!-- end home-flower -->
<div id="about-flower"></div><!-- end about-flower -->
<div id="proof-flower"></div><!-- end proof-flower -->
<div id="contact-flower" ></div><!-- end other-flower -->
</div><!-- end logo-->
<div id="page">
<div id="spacer"><br/></div><!-- end spacer -->
<div id="home">home</div><!-- end home -->
<div id="about">about</div><!-- end about -->
<div id="proof">proof of concept</div><!-- end proof -->
<div id="contact">contact</div><!-- end contact -->
</div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>
CSS：
* {
margin:0px auto !important;
}
html, body {
height:100%;
}
#container {
width:800px;
background-color:#F0F;
min-height: 100%;
height: auto !important;
height: 100%;
}
#page{
width:100%;
min-height:100%;
position:relative;
background-color:#F00;
padding-bottom:75px;
/*overflow:auto;*/
}
#logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#footer {
position:relative;
margin-top:-75px;
width:800px;
height:75px;
background-color:#C0F;
clear:both;
}
#spacer {
position:relative;
line-height:20px;
}
http://stackoverflow.com/questions/20085137/my-footer-floats/20114486#20114486 – Craig