Question

Code非常简单：

<html xmlns="http://www.w3.org/1999/xhtml">
    <body style="padding:0; margin:0;">
        <form method="post" action="/default.aspx" id="form1" style="margin: 0px; padding: 0px;">
          <div id="container-main" style="background-color:Red; height:1825px; position:relative;">&nbsp;</div>
          <div id="fascia-chiusura" style="background-color:#5CAE22; height:11px; position:relative; width:100%;">&nbsp;</div>
        </form>
    </body>
</html>

但是在Firefox / Chrome上，底部会出现一个奇怪的“空间”，而不是HTML元素。为什么会这样？我该如何解决？

屏幕截图：

enter image description here

Answer 1

http://jsfiddle.net/rtVPb/4/

删除上一个div中的 ，它运行正常。来自 的空间大于div中定义的11px，因此它会产生溢出，并且您将获得白色部分。您可以检查此行为here，其中我添加了一些可见文字..

Answer 2

http://jsfiddle.net/rtVPb/2/

删除它：

 <div id="fascia-chiusura" style="background-color:#5CAE22; height:11px; position:relative; width:100%;">&nbsp;</div>

Answer 3

您还可以将overflow:hidden添加到<div id="fascia-chiusura"/>

http://jsfiddle.net/rtVPb/9/

Answer 4

与任何事情无关，只需删除最后一个div高度或将其更改为自动

http://jsfiddle.net/rtVPb/8/

为什么HTML会在页面底部出现神秘的“边距”？

4 个答案: