將頁腳設置爲內容或頁面結尾

Question

如果內容大於一頁，我正在尋找將頁腳設置爲頁面結尾或內容結束的可能性。 我不想有一個固定頁腳的內容是可滾動的。 我不知道這是否可能。

所以，這是我的代碼。 class =「div1」的div包含內容。 內容包含內容以及頁腳。

<div class="div1"> 
    <div class="content"> 
     <div class="myContent"></div> 
     <div class="myContent"></div> 
     <div class="myContent"></div> 
     <div class="footer"></div> 
    </div> 
</div> 

頁腳的高度爲50px。 我的問題如下： 如果我有一個屏幕高度：500px，內容只有150px高，頁腳被設置在class =「myContent」的最後一個div元素之後。 它應該設置爲頁面的結尾，就像我通過

 
bottom:0;position:fixed

收到的效果一樣。但是，如果內容高度爲600px，則應該在class =「myContent」的最後一個div後面設置頁腳。這裏不需要任何樣式。

你知道如何解決它嗎？

Answer 1

你的意思是Make the Footer Stick to the Bottom of a Page？ 或本one

的CSS

html, body {height: 100%;} 

#wrap {min-height: 100%;} 
#main {overflow:auto; 
padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
margin-top: -150px; /* negative value of footer height */ 
height: 150px; 
clear:both;} 

和HTML

<div id="wrap"> 

    <div id="main"> 

    </div> 

</div> 

<div id="footer"> 

</div> 

Answer 2

我想這可能會幫助你擺脫掉這個問題：

.footer {position:absolute;left:0;right:0;bottom:0;background:green;height:50px} 

這樣可以解決目標：

<div style="position:absolute"> 
    <div style="position:absolute"> 
     <div id="top" style="height:50px;width:100%;position:fixed;left:0;top:0;background:red"> content 1 </div> 
     <div id="middle" style="background:green;position:fixed;top:50px; left:0;bottom:50px;right:0">content 2 </div> 
     <div id="middle" style="background:blue;position:fixed;top:100px; left:0;bottom:50px;right:0">content 3 </div> 
     <div id="bottom" style="height:50px;width:100%;position:fixed;left:0;bottom:0;background:orange">Footer</div> 
    </div> 
</div>