如何阻止我的'身體'吃我的'腳'

這是我的網站：http://mytestsite.nfshost.com/。如何阻止我的'身體'吃我的'腳'

如果你讓你的瀏覽器窗口更薄，你會注意到頁面的'body'標籤中的內容超過了'footer'元素。相反，我希望它僅僅推動'footer'內容而不吞沒它。

我該怎麼做？

以下是HTML和CSS中的相關部分。

<html> 
    <head> 
     -- HEAD CONTENT HERE -- 
    </head> 
    <body> 
     <h1>U.S. Neighborhood Income Map</h1> 
     <h2>See how rich or poor every part of every city in America is</h2> 
     <div id="address-form-container"> 
      <span id="form-pretext"> Enter a city name or address and pick a state (Or just a pick a state from the dropdown).</span> 
      <br> 
      <input id="address" type="textbox"> 
      , 
      <select id="state-select"> 
      <input type="button" value="Search"> 
      <br> 
      <span id="note">(NOTE: If loading takes a while, try zooming in or out.)</span> 
     </div> 
     <div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"> 
      -- MAP HERE -- 
     </div> 
     <div id="below-map"> 
      <p id="source-note" class="italics"> 
     </div> 
    </body> 
    <footer> 
     <p id="contact">Please send all questions, comments, complaints, and suggestions to [EMAIL ADDRESS]</p> 
    </footer> 
</html>

以下是有關CSS

html { 
    float: right; 
    height: 100%; 
    text-align: center; 
    width: 100%; 
} 

body { 
    background:url(./images/bg.png); 
    height: 85%; 
    position: relative; 
    right: 8px; 
    width: 100%; 

} 

#map-canvas { 
    height: 75%; 
    margin-top: 5px; 
    width: 100%; 
} 

footer { 
    margin-top: 3em; 
}

來源

2012-12-06 user1626730

+13

這可能是我見過的最有趣的問題標題。 – McGarnagle

這可能是我在Stack Overflow上看到的最可怕的標題。 – Amadan

頁腳必須放在身體標籤內。 – Alex2php

頁腳必須是身體標籤內。

來源

2012-12-06 01:17:25 Alex2php

謝謝，這工作。儘管如此，我認爲「頁腳」標籤「被允許」（因爲沒有更好的詞）在身體之外。我認爲是不正確的？如果是這樣，我想知道爲什麼它不允許在身體之外... – user1626730

'body'包含組成視覺頁面的整個數據。在它之外，只有*元數據*的頭部。看到http://stackoverflow.com/q/5492492/781965正如@jeff –

所指出的那樣，似乎它可能會讓人們感到困惑 - 至少在我看來。我的意思是，'頭部'被允許在'身體'之外，那爲什麼不'footer'呢？好吧，至少現在我知道了。謝謝。 – user1626730

使用CSS填充

footer { 
    padding-top: 25px; 
}

來源

2012-12-06 01:24:27

與class = "clear"

CSS

div.clear { 
    clear:both 
}

使用此上面要下推頁面內容的增長任何部門創建一個部門。正如亞歷克斯所言，頁腳也必須放在身上。

來源

2012-12-06 01:30:18

如何阻止我的'身體'吃我的'腳'

回答

相關問題