製作CSS頁腳可以位於瀏覽器窗口的底部或內容的底部

重複的this question。製作CSS頁腳可以位於瀏覽器窗口的底部或內容的底部

我有一個現有的網站（jacquelinewhite.co.uk），它上面有一個頁腳。目前這個頁腳總是位於主要內容的下面。我試圖讓它浮動到瀏覽器窗口的底部，或者如果內容比窗口更大，請停留在內容的底部。

有效的HTML的結構是這樣的：

<div id="container"> 
    <div id="top_bar"> 
    </div> 
<div id="header"> 
</div> 
<div id="left_menu"> 
</div> 
<div id="right_content"> 
</div> 
<div class="clear"> 
</div> 
<!-- FOOTER AREA --> 
<div id="footer"> 
</div> 
<!-- END FOOTER AREA --> 
</div>

我已經試過絕對位置，底部0，這使頁腳在窗口的底部，但如果窗口的內容是更大然後是頁腳涵蓋了內容。

我該如何解決這個問題？

來源

2009-03-05 ilivewithian

這一個總是工作很適合我：CSS Sticky Footer

來源

2009-03-05 19:35:42

不幸的是，鏈接現在已經死亡。 – 2017-11-25 04:47:43

試駕的這款...

body { 
    margin:0; 
    padding:0; 
    z-index:0; 
    } 

    #toolbar { 
    background:#ddd; 
    border-top:solid 1px #666; 
    bottom:0; 
    height:15px; 
    padding:5px; 
    position:fixed; 
    width:100%; 
    z-index:1000; 
    }

來源

2009-03-05 20:39:36

謝謝，這不是我所追求的，我希望頁腳與內容一起流動，而不是始終站在窗口的底部。 – ilivewithian 2009-03-06 11:32:56

假設你正在使用頁腳（）元素我發現只需添加這CSS我

工作

html, body { 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

footer { 
    margin-top: auto; 
}

來源

2018-01-31 11:14:03

製作CSS頁腳可以位於瀏覽器窗口的底部或內容的底部

回答

相關問題