我如何在添加內容時讓頁腳停下來？

我結構性我的網站是這樣的：我如何在添加內容時讓頁腳停下來？

<body> 

    <div class="main"> 

     <div class="header"> 
      content 
     </div> 

     <div class="section"> 
     content 
     </div> 

     <div class="sidebar"> 
     content 
     </div> 

     <div class="clearing"></div> 

     <div class="footer"> 
     content 
     </div> 
    </div> 
</body>

和CSS

.main { 
     position:relative; 
     width:908px; 
     margin-top:0px; 
     border:solid 0px; 
     margin:0 auto; 
    } 

.header { 

     position:relative; 
     height:200px; 
     margin: auto; 
    } 


    div.section { 
      float:left; 
     position:absolute; 
     width: 584px; 
     height:500px; 
     margin-top: 0px; 
     margin-left: auto; 
     margin-right: auto; 
     text-align:left; 
     } 

    div.sidebar{ 
     float:right; 
     position:relative; 
     width: 324px; 
     height:500px; 
     margin-top: 0px; 
     margin-left: auto; 
     margin-right: auto; 
     text-align:left; 
    } 

    .clearing { 

     clear:both; 
    } 



    .footer { 
    position:relative; 
    left:0px; 
    top:0px; 
    width:908px; 
    height:300px; 
    }

當我添加內容到div節，我走遍頁腳。頁腳固定在那一點，並且隨着內容的添加，頁面增長並且頁腳保持靜止。

每當我添加內容時，我必須做的是在css文件中增加節的高度或側邊欄的高度 - 任何一個都可以工作 - 但是我將兩個高度（節和側邊欄）相同的價值，因爲這似乎是正確的做法。隨着部分和邊欄的高度增加，頁腳將被推下。

但是，如果我將高度添加到添加到節的內容中，它對頁腳的位置沒有任何影響，也許是因爲它與節本身的高度無關。

有沒有辦法讓頁腳響應被添加的內容將佔據的空間，並且只是自動地移動，留在頁面的底部？

來源

2013-05-08 user2363043

我也有這個問題。我跟着Css-tricks提出了粘性頁腳教程，它幫助我解決了這個問題，我強烈建議你嘗試一下。 http://css-tricks.com/snippets/css/sticky-footer/ – Cam 2013-05-08 16:43:28

刪除.section上的絕對位置 – Turnip 2013-05-08 17:14:12

至少，您需要將頁腳上方的div放到另一個div中，清除元素位於結束包含他們全部。 – Abernasty 2013-05-08 17:33:33

您的position:absolute設置在您的.section div上，無論其實際內容如何，它都只會使用其CSS高度值來計算佔用的空間量。去除絕對位置應該可以解決你的問題。有（幾乎）總是圍繞絕對定位的方式。在你的例子中，似乎完全沒有必要。

下面是CSS定位一個有用的網站： http://www.barelyfitz.com/screencast/html-training/css/positioning/

希望它能幫助！

來源

2013-05-08 17:35:49

如果你擔心這個div對於你的佈局的高度，我建議使用「min-height：」值來適當地讓它擴展並影響頁面的流動，除了擺脫絕對定位。 – Abernasty 2013-05-08 17:59:06

我改變了相對......它沒有工作。佈局保持不變，但頁腳仍然像以前一樣運行。 – user2363043 2013-05-08 18:19:39

@ user2363043：你也想刪除'.section'的CSS中的'height'屬性。我將你的HTML和CSS逐字複製到我的計算機上的本地主機上，向'.section' div添加了5段Lorem ipsum，並刪除了'height'和'position'，並且所有行爲都符合預期。 – 2013-05-08 18:56:33

試試這個：

.footer { 
position:relative; 
left:0; 
bottom:0; 
width:908px; 
height:300px;

}

而且把0時，沒有必要添加的像素。

來源

2013-05-08 17:36:19

我做了你的建議。它沒有工作。謝謝。 – user2363043 2013-05-08 18:20:15

我正在查看CSS的代碼，並在每div的地方發現了position。嘗試，因爲它影響其他來平衡它divs
也可以嘗試

.footer{ 
    clear: both 
}

來源

2013-05-08 18:33:47 Wepex

我如何在添加內容時讓頁腳停下來？

回答

相關問題