消除HTML中的多餘高度

在SO中有幾個類似的問題，但不是確切的，它們都不能解決我的問題。消除HTML中的多餘高度

我有一個HTML頁面

<html><body> 
    <div class="container" style="height:auto;"> 
     <div class="header" style="height:120px;">...</div> 
     <div class="context" style="height:360px;"> 
     <div id="area1" style="height:440px; position:relative; top:-20px;"></div> 
     <div id="area2" style="height:120px; position:relative; top:-140px;"></div> 
     </div> 
     <div class="footer" style="height:120px;">...</div> 
    </div> 
</body></html>

基本的結構如下，有一個在context高度440px的高度爲360像素，一個div。所以div將分別與header和footer重疊20px和60px。

container的高度被設置爲auto，並且它使用「檢查元素」顯示「600px」，所以body也是如此。但是html的高度爲680px。

我知道額外80px來自哪裏，但如何消除？

我還有一個問題，但似乎沒有人會回答它後，我更新了一個問題。 How to design a gradient background of a page with unfixed height。如果這個問題可以解決，也許我可以避免這個問題。

*更新*

看來我只是代碼太多，實際上是兩個div有在context，area1和area2。高度120px的area2完全與area1重疊。

來源

2011-11-23 DrXCheng

是不是html高度==瀏覽器窗口高度？ –

如果我使用你的代碼，我的HTML是616px的高度。我不確定那些額外的像素來自哪裏，儘管它可能是某種不受歡迎的排水溝。 – worc

@AlessandroPezzato爲什麼html高度不等於容器高度？ – DrXCheng

我想通了。我用margin-top:-20px替換position:relative; top:-20px;，和另一個類似，那麼它是完美的。

來源

2011-11-24 06:34:44 DrXCheng

您是否意識到CSS不正確？

你需要這些屬性之間的分號：

style="height:440px position:relative top:-20px"

像這樣：

style="height:440px; position:relative; top:-20px"

來源

2011-11-23 02:57:59

我沒有像這樣寫內聯。 CSS是正確的。 – DrXCheng

現在它已被編輯。 –

消除HTML中的多餘高度

回答

相關問題