Question

我正在使用this method将页脚正确放在页面底部。

但是，当我向页脚添加边框时，无论屏幕上的内容如何，我都会使用滚动条。我的困惑在于：

我认为边框在填充之外但在边距内部起作用，就像填充一样，它们不会影响div外部的任何布局。

这是错的吗？

这是我的骨架html：

<body>
    <div class="wrapper">
        <div id="top"></div>
        <div id="body">
            <div id="box1"></div>
            <div id="box2"></div>           
        </div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>

这是相关的CSS：

     #top
        {
            height: 105px;
            border-bottom-style: solid;
            border-bottom-color: #044E97;
            border-bottom-width: 7px;
        }

    #body
        {
            margin-top: 25px;
            width: 100%;
            background-color: white;
            color: #282828;
            font-size: 85%;
        }

    #box1
        {
            width: 460px;
            float: left;
            margin-left: 25px;
            margin-right:75px;
        }

    #box2
        {
            margin-left: 25px;
            margin-top: 15px;
            padding-top: 0%;
            padding-bottom:0%;
            margin-bottom:45px;
            width: 350px;
            height: 320px;
            float:left;
            border-top-style: solid;
            border-top-color: #FFFFFF;
            border-top-width: 10px;
        }           
    html
        {
            height: 100%;
        }
    body
        {
            min-height: 100%;
            background-color: white;
            margin: 0;

        }
    html, body
        {
            min-height:100%;
            position:relative;
        }

    .wrapper
        {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -3em;
        }
    .footer, .push
        {
            height: 3em;
            clear: both;
        }
    .footer
        {
            width:100%;
            background-color: #0563A1;
            border-top-style: solid;
            border-top-color: #044E91;
            border-top-width: 8px;
            color: white;
            font-size: 77%;
            padding-top:.3em;
            padding-bottom:.3em;
        }

如果我将页脚div更改为没有填充，则滚动条会清除。

Answer 1

这个假设不正确：

我认为边框在填充之外但在边距内部起作用，因此像边距一样它们不会影响任何布局

边距和边框会影响布局 - 只是它们位于填充之外。间距的层次结构从明确定义的维度（宽度和高度）开始，然后是填充，然后是边框，然后是边距。

如果边框和边距不影响布局，则无法在元素之间创建间距（无边距）或相邻元素的边框将重叠（边框不占用额外空间）。

您面临的问题是边界的计算不是宽度或高度的一部分 - 当您在身体底部留下3em空间时，3em高的页脚将填充空间。但是当你为它添加边框和/或填充时，它会向定义的高度添加一个额外的垂直高度（8px的顶部填充和每个0.3em的顶部和底部边框的总和），使其超过3em并因此触发溢出。

要强制您的页脚粘贴到3em，您可以使用box-sizing: border-box强制height属性考虑边框宽度和填充，或height: calc(3em - 0.6em - 8px)手动降低页脚的高度高度，顶部填充和顶部+底部边框宽度的总和保持在3em总和。

Answer 2

将您的盒子模型更改为边框，如下所示：

html{box-sizing: border-box;}

如果有帮助，请告诉我。

为什么我的页脚上的CSS边框推动页面超过100％

2 个答案: