sinat_36631265
xw_chan
采纳率50%
2016-11-10 10:31 阅读 2.0k

footer标签宽度修改不了。

就是图中下面那块有背景颜色的,两边还是白色的。后来看了下好像是.contanter css设置的问题,可以在不该.contanter的情况下让fooler的背景颜色填充满下面吗?
html代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>My First Website</title>
</head>
<body>
    <header>
        <nav class="clearfix"> <!--导航开始-->
            <div class="logo c1"><a href="index.html">FIRST</a></div>
            <div class="items c2">
                <ul>
                    <li><a href="http://www.baidu.com">baidu</a></li>
                    <li><a href="http://www.bilibili.com/">bilibili</a></li>
                    <li><a href="https://www.zhihu.com/">zhihu</a></li>
                    <li><a href="#">about</a></li>
                </ul>
            </div>
        </nav>
        <div class="inner">
            <h1>My First Website</h1>
                <div class="h1-sub">
                16.11.09
                </div>
        </div>
    </header><!--导航结束-->
        <div class="content"><!--内容开始-->
            <div class="contanter">
                <div class="story-item">
                    <h2><a href="story.html">第一个只用了html和css的网站</a></h2>
                    <div class="summary">用了只是学了两三天的技能来实现一个网页的布局,看似简单却一点都不容易,margin的问题真的很多,div也是一个大问题,主要是要理解选择器之间的关系。
                </div>
                <div class="info">16-11-10|作者:Chan|阅读:1</div>
                </div>
        </div><!--内容结束-->
    <footer><!--页尾开始-->
        <div class="foot-item">
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
            </ul></div>
    </footer><!--页尾开始-->
</body>
</html>

css代码如下

 *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a{
  text-decoration:none;
}

h1{
  margin: 20px;
  color: white;

}
ul{
  margin: 0;
  padding: 0;
}

.c1,.c2{
  position: relative;
  float: left;

}

.c1{
  width: 16.666666%;
}

.c2{
  width: 83.333333%;
}

.clearfix:before
{
  content: " ";
  display:table;
}

.clearfix:after
{
  content: " ";
  display:table;
}

.logo{
  font-size: 20px;
  padding: 18px;
  font-weight: 900;
  color: #ddd;
}

header{
  min-height: 350px;
  background-color: #aaa;
  background-image: url('img/IMG_3052_1.jpg');

  background-size: cover;
}

nav{
  background-color: #333;

}

nav .logo.c1 a{
  color: #ddd;
}

nav .logo.c1 a:hover
{
  color: #eee;
}

nav .items ul{
  float: right; 
  padding-right: 20px;
}

nav ul li{
  list-style: none;
  display: inline-block;
}

nav ul li a{
  display: inherit;
  text-decoration: none;
  padding: 20px 10px;
  color: #fff;
}
nav ul li a:hover{
  color: #eee;
}


/*nav end*/
.inner {
  width: 400px;
  margin: 150px auto ;
  margin-bottom: 0;
  position: relative;
  text-align: center;

}

.h1-sub{
  font-weight: 900;
  text-align:right;
  padding: 20px;
  color: white;
}

.contanter{
  width: 800px;
  margin: 0 auto;
  ;
}

.story-item h2{
  font-size: 30px;
  margin: 10px 0;
  font-family: Microsoft Yahei;
  color: #444;
}
h2 a{
  color:#444;
}

.story-item .summary{
  font-size: 18px;
  font-family: Microsoft Yahei;
  width: 500px;
  font-weight: 100;
  color: #777;
  margin: 20px 0;
}

.info{
  width: 700px;
  font-size: 15px;
  color: #aaa;
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #aaa;
}

footer{
  margin: 0 auto;
  background-color: #777;
}

footer .foot-item ul{
  list-style: none;
  text-align: center;
  padding-top: 100px;
}

.foot-item ul li{
  display:inline-block;
  padding: 20px;
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2016-11-10 13:48

    footer fixed定位在最下罗。。或者js计算下剩余空间设置好高度footer{position:fixed;left:0;bottom:0;width:100%;
    margin: 0 auto;
    background-color: #777;
    }

    点赞 1 评论 复制链接分享

相关推荐