8

我试图让我的页脚位于页面的末尾，所以我使用 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>
4

5 回答 5

7

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

于 2013-07-26T19:46:43.250 回答
4

您的页脚位于正文中，正文位于 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%。

于 2013-07-26T19:46:29.620 回答
3

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

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

于 2013-07-26T19:51:30.907 回答
1

尝试这个..

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

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

在这里更新小提琴

于 2013-07-26T20:03:38.227 回答
1

从下面的 css 我删除了 padding 属性 

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

    }

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

 footer section
    {
        margin:10px 20px;

    }
于 2013-07-27T20:47:15.403 回答