Question

我正在网站上工作，并在页面底部显示一条实线。

详细信息：我有一个容器元素height: 99%;。我还设置了渐变背景效果（仅使用CSS）。现在，在我的主container元素下面，有一个纯色块，它与渐变填充的上半部分的颜色相匹配。但请注意，这不是导致问题的原因，即使我完全删除CSS的渐变部分，空白行仍然可见（我已设置background-color:元素的container变红，以便我可以看到问题是否仍然存在。）

例如，如果渐变从红色（顶部）渐变到黑色（底部），则页面底部的实线为红色。

我已将container元素的高度设置为100％甚至高达150％，实线仍然存在。

一个例子可能是这样的：

+----------------------+
|   _________________  |
|  |        C       |  |
|  |        O       |  |
|  |        N       |  |
|  |        T       |  |
|  |        A       |  |
|  |        I       |  |
|  |        N       |  |
|  |        E       |  |
|  |        R       |  |
+______________________|
|______________________| <--- solid line appears here 
                              (but narrower, approx 5px in height).

希望这能让您大致了解问题所在。

我的HTML非常好 - 我已经彻底检查了它，并且容器<div>元素之外没有任何元素。

我知道可以有任意数量的解决方案，所以为了简化问题，我想问一下是否有任何与CSS相关的常见（或不那么常见）问题可能导致发生？

或者，更好的是，还有其他人有这个问题吗？如果有的话，你是如何纠正它的（如适用）？

感谢您的时间。

米克

更新：问题在于：我已将container的上边距设置为5px，导致页面底部也显示底部的5px边距。但是，如果我将其设置为0，那么页面底部的边距也会设置为0.

有人可能会弄清楚为什么会这样吗？

（注意：您必须向外扩展框架以查看页面，并查看问题）。

http://jsfiddle.net/mxh6G/

Answer 1

在css中设置

body{margin:0; padding:0;}

或

* {margin:0; padding:0;}

Answer 2

这会呈现一个黑色页面（因此你可以看到底部没有边距），白色内部div称为容器，顶部有5px的边距

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>

    <head>

        <style>
            body {margin:0; padding:0; background:#000;}
            #container {width:600px; height:600px; margin:5px auto 0 auto; background:#fff;}
        </style>

    </head>

    <body>

        <div id="container"></div>

    </body>

</html>

Answer 3

div {
border: 1px solid black;
}
.main {
position: relative;
height: 200px;
width: 200px;
}
.inner {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 30px; 
}

<div class="main">dasdasd<div class="inner">fdsfds</div></div>

演示： http://jsfiddle.net/JS2y2/

CSS / HTML - 行出现在页面底部

3 个答案: