Question

我试图让我的页脚位于页面的末尾，所以我使用position：absolute和bottom：0来执行此操作。问题是背景颜色不会扩展到适合屏幕，所以我尝试使用宽度：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>

Answer 1

尝试使用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/

Answer 2

您的页脚位于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％。

Answer 3

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

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

Answer 4

试试这个..

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

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

updated fiddle here

Answer 5

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

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

    }

并在ur css中添加此内容

 footer section
    {
        margin:10px 20px;

    }

CSS宽度：100％不适合屏幕

5 个答案: