底部帮助

我一直在尝试为我的网站实施底部栏，但是我觉得我的视觉相当困难。也许你可以启发我？底部帮助

如果内容没有溢出边缘，我希望有一个位于浏览器窗口底部的底部栏，但如果内容溢出，我希望内容底部的底部栏。我宁愿如果它是CSS解决方案，但它可能会更好/更容易在别的东西，我不知道。也没有PHP。

我希望你能理解我。

并预先感谢任何答案。

来源

2010-01-04 Thorbjørn Reimann-Andersen

你有没有看着http://www.cssstickyfooter.com/

来源

2010-01-04 11:34:45

+1更好的答案。我已经撤回了我的。 – 2010-01-04 11:37:53

感谢乔，这似乎正是我所期待的。虽然我有一些实现它的问题。但感谢您在正确的方向点 – 2010-01-04 13:30:26

明白了。谢谢。 – 2010-01-04 15:11:34

假设底栏的高度是固定的它相当简单。例如：

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #content { min-height: 100%; } 
     * html #content { height: 100%; } /* IE6 hack */ 
     #trailer { height: 2em; margin-top: -2em; background: yellow; } 
     #pad { height: 2em; } 
    </style> 
</head><body> 
    <div id="content"> 
     Content content content content content content content content content content content. 
     <div id="pad"></div> 
    </div> 
    <div id="trailer"> 
     Bit at the bottom. 
    </div> 
</body></html>

来源

2010-01-04 11:44:57 bobince

像这样的事情就可以了，（注意对于一些padding-bottom额外的包装的div，以确保页脚不重叠的内容是必需的），

<html> 
<head> 
    <title>Sticky Footer Test</title> 

    <style> 
     html, body { 
      height: 100%; 
      padding: 0px; 
      margin: 0px; 
     } 

     * { 
      margin: 0px; 
     } 

     #container { 
      min-height: 100%; 
      height: auto !important; 
      height/**/: 100%; /* for IE6 */ 
      background: #ddd; 
     } 

     #footer { 
      position: relative; 
      background: #555; 
      margin-top: -100px; 
      height: 100px; 
     } 

     #content { 
      padding-bottom: 100px; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="content"> 
      <p>Hello! I'm some content!</p> 
     </div> 
    </div> 
    <div id="footer"> 
     <p>Hello! I'm a footer!</p> 
    </div> 
</body> 
</html>

来源

2010-01-04 11:52:40

回答

相关问题