2009-09-24 124 views
0

这让我疯狂。我试图让页脚div处于页面底部,即使主要内容不能填充浏览器的高度。下面的代码工作除了当我收起浏览器,然后页脚div重叠包装div,然后滚动条出现。我希望它能够像包括这个在内的大多数网站一样在包装div上碰撞。我究竟做错了什么?底部定位DIV

<html> 
    <head> 
     <style> 
      body { color:#000; margin: 0; height: 100%; } 
      #wrapper {min-height: 100%; height: auto !important; height: 100%; background:#ff0000; 
       margin: 0 auto -4em; text-align: left; width: 100%; } 
      #header { width: 100%; height: 80px; } 
      #content { width: 100%; background:#00ff00; } 
      #footer { background:#0000ff; height: 4em; } 
     </style> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       some menus; 
      </div> 

      <div id="content"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac eros diam, nec ultrices nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ipsum libero. Sed ultricies orci ut magna vulputate eu congue justo condimentum. Phasellus a convallis ipsum. Nam nec sapien eget massa porta tristique. Proin metus diam, imperdiet nec eleifend a, faucibus eget quam. Nunc non lacus sit amet lorem vehicula viverra ut vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id tellus id ligula dictum consequat non ut ligula. Morbi interdum felis sed turpis sagittis vulputate. 
      </div> 
     </div> 

     <div id="footer"> 
      &copy; 2009 Somebody 
     </div> 
    </body> 
</html> 
+1

东西doctype.com? – Natrium 2009-09-24 10:50:28

+0

投票关闭,许多重复之一:http://stackoverflow.com/questions/1112082/problem-with-css-sticky-footer-implementation – markus 2009-09-24 10:57:17

+0

只是搜索SO粘滞页脚。 – markus 2009-09-24 11:05:42

回答