Question

在SO中有一些类似的问题但不完全正确，但没有一个能解决我的问题。

我有以下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的div，其高度为360px。因此div将分别与header和footer重叠，分别为20px和60px。

container的高度设置为auto，使用“inspect element”显示“600px”，body也是如此。但html的高度为680像素。

我知道额外的80px来自哪里，但如何消除它？

我有另一个问题，但在我更新了另一个问题之后，似乎没有人会回答这个问题。 How to design a gradient background of a page with unfixed height。如果这个问题可以解决，也许我可以避免这个问题。

*更新*

我似乎只是代码太多了，div，context和area1实际上有两个area2。高度为120px的area2与area1完全重叠。

Answer 1

您是否意识到CSS不正确？

您需要在这些属性之间使用分号：

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

像这样：

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

Answer 2

我发现了。我将position:relative; top:-20px;替换为margin-top:-20px，与另一个相似，那就完美了。

消除HTML中的额外高度

2 个答案: