如何使我的頁腳推內容？

好的，所以我在我設計的頁面上有這個頁腳，但是我遇到了一個問題;頁腳粘貼到頁面底部，但內容可以通過它...這就是我的意思 - http://i46.tinypic.com/2zted15.png。如何使我的頁腳推內容？

這是我爲我的頁腳中的CSS/HTML代碼：http://pastebin.com/ZKCuBjhn

非常感謝先進。

編輯：這裏是整個頁面的代碼 - HTML代碼：pastebin.com/RAj11cPP --- CSS代碼：pastebin.com/0kMgb1R2

注：
標籤可笑量代碼是爲了證明我的問題。

來源

2012-05-08 Richie

我們需要更多的代碼該頁面的其餘部分。 – element119

在原始文章中添加了完整代碼的鏈接。 – Richie

你需要絕對定位還是隻需在中間向下推動時流動？ – Billeeb

嘗試將clear: both;添加到您的頁腳樣式中。很高興看到頁面高手的其餘部分的代碼。

真正的答案：
看你的代碼後，好像這更是你想要什麼：http://pastebin.com/Letx9hPA

我改變了你頁腳的位置固定，使其停留在頁面的底部。如果這不是你想要的，那就把所有的位置放在一起，這樣它就可以自由地推下去。

另外，我還將您的內容包裹在內容div中，以便我可以在底部添加所需的間隔以使其全部可見。通過設置padding-bottom: 100px添加Spacer，這是頁腳的高度。

來源

2012-05-08 21:20:52 Spencer

沒問題，這裏是HTML代碼：http：// pastebin。com/RAj11cPP和CSS代碼：http://pastebin.com/0kMgb1R2注意：
標籤的荒謬量是爲了證明我的問題。 – Richie

你正在使用位置：絕對的div，所以你從正常的頁面流中刪除它，然後，上面的內容將通過。

如果你以前的html是一個div或類似封閉整個上一塊的東西，那麼使用div，不要使用「position absolute」它，使用寬度：100％，margin：0 auto;問題不在於您的頁腳，而在於頁腳之前的代碼。

萬一它是一個div，你必須給一些高度，但使用最小高度，所以當它裏面的內容溢出時，該div表現很好，並推動你的頁腳向下。如果你使用高度，那麼div將採用這個高度，你的溢出內部將泄漏。

這裏有一個簡單的代碼：

body { 
     background-color: #d6d6d6; 
    } 

    .header { 
     background-color: #006F8D; 
     color: #fff; 
     margin: 0 auto; 
     width: 600px; 
     height: 100px; 
    } 

    .center { 
     background-color: #fff; 
     color: #454545; 
     margin: 0 auto; 
     width: 600px; 
     min-height: 100px; 
    } 

    .footer { 
     background-color: #fff; 
     color: #454545; 
     margin: 0 auto; 
     width: 600px; 
     height: 50px; 
     border-top: 1px solid #ccc; 
    }

這是對CSS，現在對於HTML：

<div class="header">menu 1 - menu2 - menu3</div> 
    <div class="center">Middle<br /> 
    Middle<br /> 
    Middle<br /> 
    Middle<br /> 
    Middle<br /><br /> 
    v 
    v 
    Middle<br /><br />Middle<br /><br />Middle<br /><br />v 
    v<br />v 
    Middle<br /><br />v 
    v<br />Middle<br /> 
    v 
    v 
    v 
    v 
    v 
    v 
    vMiddle<br />Middle<br />Middle<br />Middle<br /> 
    <br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br /> 
</div> 
<div class="footer">Footer</div>

如果您需要絕對定位頁腳，那麼答案是另外一個。澄清我，我會回答另一個問題。

編輯：你與我的代碼（不使用你的CSS，神，請勿使用過時標籤!!!!字體，中心等）

<style type="text/css"> 
      .header { 
     background-color: #006F8D; 
     color: #fff; 
     margin: 0 auto; 
     width: 600px; 
     height: 100px; 
    } 

    .center { 
     background-color: #fff; 
     color: #454545; 
     margin: 0 auto; 
     width: 600px; 
     min-height: 100px; 
    } 

    .footer { 
     background-color: #fff; 
     color: #454545; 
     margin: 0 auto; 
     width: 600px; 
     height: 50px; 
     border-top: 1px solid #ccc; 
    } 
</style> 
</head> 
<title>Website Homepage</title> 
<body> 

<!--====================Begin Navigation Bar========================--> 
<div class="header" id="navigation"> 
<div style="float:left;"> 
    <a href="index.html">Home</a> 
    <a href="signup.html">Sign Up</a> 
    <a href="login.html">Login</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
</div> 
</div> 
<!--====================End Navigation Bar==========================--> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<!--====================Begin Content Area======================--> 
<div class="center" style="padding:10"> 
See my problem? 
</div> 
<!--====================End Content Area========================--> 

    <!--====================Begin Footer========================--> 

<div class='footer'> 
<div style="padding-top:20px;"> 

       Website. All Rights Reserved. 

<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)"> 
<input name="q" type="hidden" /> 
<input type="text" placeholder="Search our site..." name="qfont" /> <input type="submit" value="Search" /> 
</form> 
</div> 
</div> 

    <!--====================End Footer==========================--> 

</body> 
</html>

來源

2012-05-08 21:41:43 Billeeb

如何使我的頁腳推內容？

回答

相關問題