CSS 宽度：100% 不适合屏幕答案

【问题标题】：CSS width:100% not fitting the screenCSS 宽度：100% 不适合屏幕
【发布时间】：2013-07-27 05:06:22
【问题描述】：

我试图让页脚位于页面末尾，因此我使用 position:absolute 和 bottom:0 来执行此操作。问题是背景颜色不会被扩展以适应屏幕，所以我尝试使用 width:100% 但现在它有额外的像素

这是我创建的示例 http://jsfiddle.net/SRuyG/2/ （不好意思有点乱，刚开始学css）

我还尝试了一些我发现的教程中的粘性页脚，但它也不起作用。那么究竟如何才能将页脚设置在页面底部并且背景适合屏幕尺寸呢？

谢谢

CSS：

html, body {
    margin: 0;
    padding: 0;
}

body {     
    font: 13px/22px Helvetica, Arial, sans-serif;  
    background: #f0f0f0;  

} 

.contentWrapper{
     min-height: 100%;
     margin-bottom: -142px; 
}

.contentWrapper:after {
  content: "";
  display: block;
  height: 142px; 
}

nav {
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    box-shadow: 0px 0px 4px 4px #888888; 

}

#navBar li{
    display:inline;
}

#navBar li a{
    color: #fff;
    text-decoration: none;
    padding: 25px;
}
#navBar li a:hover{
    background:#fff;
    color: #222;
    text-decoration: none;
    padding: 25px;
}

footer {
    position:absolute;  
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    bottom:0;
    width: 100%;

}

HTML：

<body>  

    <nav>  
        <ul id='navBar'>  
            <li><a href="#">link 1</a></li>  
            <li><a href="#">link 2</a></li>  
            <li><a href="#">link 3</a></li>  
        </ul>
    </nav>  



    <div id="contentWrapper">
        <section id="intro">  
        <header>  
            <h2>Intro</h2>  
        </header>  
        <p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
            Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
            Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
        </p>
        </section>  
    </div>

    <footer>  
            <section id="about">
                <header>
                    <h3>Footer</h3>
                </header>
                <p>some text here. </p>
            </section>
    </footer>  

</body>

【问题讨论】：

标签： html css width

【解决方案1】：

您的页脚在正文中，即在 HTML 中。由于您尚未声明宽度，因此它不会扩大到超出所需范围。对于您的特定 HTML，您应该对您的 CSS 执行以下操作：

body, html {
  width: 100%; // or body { width: 960px; } if you're using a fixed width
}

footer {
  width: 100%;
}

最后，请记住，任何以百分比设置的宽度（几乎）总是与父级进行比较。 50% 的父母的 100% 仍然是 50%。 75% 的父级的 50% 只会产生总视口宽度的 37.5%。

【讨论】：

【解决方案2】：

尝试使用box-sizing: border-box; 将边框和填充区域限制为<footer> 的宽度 - 因为padding: 10px 20px 规则是导致滚动条出现的原因。

footer {
    position:absolute;  
    background: #222;  
    color: #fff;
    list-style: none;
    font-size: 1.2em;
    padding: 10px 20px; 
    bottom:0;
    width: 100%;
    box-sizing: border-box;
}

http://jsfiddle.net/SRuyG/4/

【讨论】：

【解决方案3】：

您可以从页脚中删除padding: 10px 20px; 并添加footer section{margin:10px 20px}

http://jsfiddle.net/SRuyG/5/

【讨论】：

如果您需要支持不支持 box-sizing 属性的 IE7 或更低版本，则此方法比接受的答案更好。

【解决方案4】：

试试这个..

从页脚中删除这些规则..你会没事的

position:absolute;
bottom:0;
width:100%;

updated fiddle here

【讨论】：

【解决方案5】：

我从下面的 css 中删除了填充属性

footer {
        position:absolute;  
        background: #222;  
        color: #fff;
        list-style: none;
        font-size: 1.2em;
        bottom:0;
        width: 100%;

    }

并在你的css中添加这个东西

 footer section
    {
        margin:10px 20px;

    }

【讨论】：