2009-09-24 125 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

回答