Question

我的页面上有一个页脚，在html中定义如下：

<div id='footer'>
    <span style="float:left;">
        Contact me at <a href='mailto:admin@test.com'>admin@test.com</a>
    </span>
    <span style="float: right;">test</span>
</div>

页脚div的CSS就是这样：

#footer {
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: 998;
    width: 100%;
    background-color: #000000;
    padding: 2px 0 3px 20px;
    border-top: 3px groove #aaaaaa;
    font: 11pt Arial;
}

我通过一些Google搜索发现，填充div会将填充添加到该大小。在我的情况下，向左填充20px会增加20px的宽度，因此div的新宽度为100％+ 20px，而额外的20px则偏离视口的右边缘。

我发现很多人都说要使用边距而不是填充，所以我尝试使用margin-left：20px而不是padding，但“test”文本仍然在屏幕右边。

如何模拟填充的外观，但屏幕上没有正确的浮动文本？

Answer 1

如果您不关心IE8及以下版本，可以使用box-sizing: border-box以便填充包含在宽度中。

Answer 2

您可以强制div在边框框模式下渲染框尺寸。这会导致填充添加到框的内部，并且您的div将永远不会超过100％。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。只需注意这在IE8 +中有用。

box-sizing: border-box;

工作示例：http://codepen.io/davidsturgeon/pen/zJcnL

Answer 3

适用于每个浏览器的另一个解决方案是在页脚中添加另一个div：

<div id='footer'>
    <div id="footerContent">Contact me at <a href='mailto:admin@test.com'>admin@test.com</a></div>
    <span style="float: right;">test</span>
</div>

然后你可以自由设置footerContent的样式，而不会干扰主要的div大小。

http://jsfiddle.net/G3Yxt/

填充扩展div屏幕

3 个答案: