logo标签列表

CSS宽度为100％无法适应屏幕

htmlcsswidth
10
我正在尝试让我的页脚位于页面底部，因此我使用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>
5个回答
8
尝试使用 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/

5
您的页脚位于body内部，而body又在HTML内部。由于您没有声明宽度，因此它不会扩展到比必要更宽的范围。对于您特定的HTML，您应该使用以下CSS代码:
```css footer { width: 100%; } ```
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％。

3
如果你需要支持不支持box-sizing属性的IE7或更低版本，那么这种方法比被接受的答案更好。 - Adam Hart
1

试试这个...

从页脚中删除这些规则...你就没问题了

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

这里更新了代码片段

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;

    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接