执行CSS粘性页脚与液体/流体布局的问题

我想实现CSS粘性页脚方法，如cssstickyfooter.com所示。（我也试过Ryan Fait's解决方案，但无济于事）。执行CSS粘性页脚与液体/流体布局的问题

我一直关注所有事情，或者至少我认为我有。我有一个容器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; 
}

来源

2011-08-02 Joe

http://stackoverflow.com/questions/20085137/my-footer-floats/20114486#20114486 – Craig

它看起来像我需要的#home，#about，#proof和#contact的div的位置改变到相对而不是绝对像我有他们。但是，一旦我这样做了，它们就不再堆叠在一起了。关于如何使相对定位的div的任何想法都具有相同的（x，y）位置，以便它们彼此重合？我有top和left设置为0px为每个div，但他们只是分层自己而不是堆叠...如果这是有道理的。

来源

2011-08-03 00:53:52 Joe

有关使用

<div id="footer"> 
    This is footer text 
</div><!-- end footer -->

和css如何为

#footer{ position:fixed; bottom:0px; }

页脚粘贴到页面的底部。

这是你在找什么。

来源

2011-08-02 11:23:54 prasvin

试过之前。但是，这使得它保持在所有内容之上。如果内容不超过观看区域或内容结束时（如果内容长于观看区域），我所寻找的是让它停留在窗口的底部。谢谢你的答案 – Joe

执行CSS粘性页脚与液体/流体布局的问题

回答

相关问题