html - CSS:大水平滚动条的小页脚问题

Question

我的页脚无法正常工作。出于某种原因，它给出了一个 100% 宽度的滚动条。我尝试实现 Sticky Footer 技术，可能出了点问题 :D

这是控制页脚的CSS代码:

.mf{
background: #eaeade;
width: 100%;
padding-left:100px;
padding-top:51px;
padding-bottom:11px;
position: absolute;
margin: 0 auto;
bottom: 0;
}

这是 html:

<div style="background-color:#EAEADE;text-align:center;overflow:hidden;">
                    <div class='mf'>
              <div class='home-links-footer' style="color:#8E8E80;">
                <a href="index.php">Home</a> | <a href="index.php?option=com_content&view=article&id=14&Itemid=5">Beveel ons aan!</a> | <a href="index.php?option=com_content&view=article&id=4&Itemid=2">Onze Services</a> | <a href="index.php?option=com_content&view=article&id=5&Itemid=3">Laptop Reparatie</a> | <a href="index.php?option=com_content&view=article&id=6&Itemid=4">Onze Tarieven</a> | <a href="index.php?option=com_content&view=article&id=14&Itemid=5">Contact Gegevens</a> | <a href="#">Sitemap</a>
              </div>
              <div style="color:#8E8E80;border-bottom:1px dotted;padding-bottom:3px;width:700px;margin:auto;">
                Friese Computerservice - 8932 JZ Leeuwarden - <a href="mailto:info@friesecomputerservice.nl" style="text-decoration:none;"><span style="color:#F57F20;font-weight:bold;">info@friesecomputerservice.nl</span></a> - Tel. 058-8446628 Mob. 06-29594595
            </div>
        </div>
    </div>

Answer 1

您必须明白，CSS 盒模型认为“宽度”是指盒的内容 的宽度，而不是盒的整体尺寸。您已经在左侧和右侧为您的框添加了内边距，因此内边距将位于 100% 宽度的之外。

就我个人而言，我发现这是一种非常奇怪的工作机制，但你去吧。

什么应该工作(但不会在旧的 IE 版本中)是不提及“宽度”而只是将“左”和“右”设置为 0。