html – CSS宽度：100％不适合屏幕

发布时间：2020-12-14 18:26:59 所属栏目：资源来源：网络整理

导读：我试图让我的页脚在页面的末尾,所以我使用position：absolute和bottom：0来做到这一点. 问题是背景颜色不会扩展到适合屏幕,所以我尝试使用宽度：100％,但现在它有额外的像素这是我创建的例子 http://jsfiddle.net/SRuyG/2/ (对不起,它有点乱,我刚开始学习CS

我试图让我的页脚在页面的末尾,所以我使用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,blah blah blah.
            Paragraph goes here,blah blah blah.
        </p>
        </section>  
    </div>

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

</body>

解决方法

尝试使用 box-sizing: border-box;将边框和填充区域约束到< footer>的宽度. – 作为填充：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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!