将我的页脚宽度设置为100％显示滚动条

尽管我将页脚的宽度设置为100％，但它的宽度方面却超过了100％。任何想法为什么？我知道问题是宽度，因为当我删除100％时，它不显示滚动条。该页面被分解为身体>包装>页脚这里是我的代码：将我的页脚宽度设置为100％显示滚动条

#footer { 
    margin-top: 30px; 
    color: white !important; 
    padding-bottom: 15px; 
    background: black; 
    text-align: center; 
    padding: 20px; 
    height: 40px; 
    min-width: 1000px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
}

而且有身体的CSS：

body { 
    font: normal 12pt Georgia, serif; 
    color: #111; 
    background: #990000; 
    margin: 0 auto; 
    text-align: center; 
    background-position: 50% 50%; 
    min-height: 100%; 

    margin:0; 
    padding:0; 
    height:100%; 
}

和包装CSS：

#wrapper { 
    min-height:100%; 
    position:relative; 
}

来源

2012-10-01 dreamer_999

这很可能是由于默认Box Model在html页面中的工作原理：在内容的宽度设置为100％之后，会添加边框，边距和填充，从而将最终宽度增加到100％以上。

对于现代浏览器：冰箱大小！

请参阅this jsfiddle与您的原始代码。
请参阅this newer version与box sizing设置为border-box（仅适用于较新的浏览器）。这个版本没有显示水平滚动条（我将最小宽度缩小了很多，或者它会抛弃jsfiddle中的示例）。

旧版本浏览器

如果要解决这个问题为你必须做一些事情在你的CSS填充旧的浏览器。将其从页脚中删除，然后放置一个“footer-content”div，其边距等于旧填充。例如：

#footer { 
    /* padding: 20px; removed! */ 
} 
#footer-content { 
    margin: 20px; 
}

来源

2012-10-01 05:24:14 Jeroen

谢谢jsfiddle是一个非常有用的工具！ –

你在页脚的CSS中设置了填充。这增加了宽度，并使其大于100％。这就是为什么你看到一个滚动条。

用以下这些行替换填充。

padding-top:20px; 
padding-bottom:20px;

此外，通过将页脚div的最小宽度设置为1000px，您将在浏览器屏幕中获得比1000px更窄的滚动条。

来源

2012-10-01 05:24:37

这工作就像一个魅力！没有意识到我设置paddint顶部不同。但不是填充：20px相当于填充顶部：20px？ –

@bigollo，当你使用“padding”设置填充时，只有基本上将它设置在所有4个面：顶部，底部，右侧和左侧。除非指定了需要填充的位置，否则在所有浏览器中都是如此。 –

许多浏览器在BODY元素周围都有一个默认边距，这会增加宽度。

来源

2012-10-01 05:25:30 Barmar

这是因为填充而发生的。看到你的问题的例证here。

当您使用填充时，大小分别被添加到总高度和宽度。

删除填充将解决您的问题。 ^Demo

#footer { 
    margin-top: 30px; 
    color: white !important; 
    background: black; 
    text-align: center; 
    height: 40px; 
    min-width: 1000px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
}

另一个好的解决方法是让浏览器不同的方式对待你的元素。通过使用box-sizing属性。

#footer { 
    /* Add box-sizing */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    margin-top: 30px; 
    color: white !important; 
    padding-bottom: 15px; 
    background: black; 
    text-align: center; 
    padding: 20px; 
    height: 40px; 
    min-width: 1000px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
}

Demo

来源

2012-10-01 05:29:28 Starx

只需添加0填充，0边框，0保证金在开始的所有元素。

* { 
padding: 0; 
border: 0; 
margin: 0; 
}

来源

2016-06-14 18:07:20

将我的页脚宽度设置为100％显示滚动条

回答

相关问题