CSS宽度：100％不适合屏幕

我试图让我的页脚在页面的末尾，所以我使用position：absolute和bottom：0来做到这一点。问题是背景颜色将不会延长以适应屏幕，所以我尝试使用宽度：100％，但现在它有额外的像素CSS宽度：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>

来源

2013-07-26 punkaceratop

尝试使用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-26 19:46:43 Adrift

你的页脚是身体，这是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-26 19:46:29 mikedugan

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

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

来源

2013-07-26 19:51:30 David

这种方法比，如果你需要接受的答案更好支持IE7或更低版本，它不支持box-sizing属性。 –

试试这个..

从footer..you'll删除这些规则是细

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

updated fiddle here

来源

2013-07-26 20:03:38 sa77

从下面的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-27 20:47:15

CSS宽度：100％不适合屏幕

回答

相关问题