Question

我希望我的页脚能够很好地适应两行。但是我所拥有的不够伸展，底部应该是白色但显示为黑色背景。

    <footer>
  <div id="footer">
    <div class="inner-wrap clearfix">
      <div class="section about">

      </div>
  </div>
  <div id="bottom-footer">
    <div class = "inner-wrap clearfix">
      <p class="fotter-quote">
        <em>
          <i class = "fa fa-quote-left"></i>just live your life<i class = "fa fa-quote-right"></i>
        </em>

      </p>
    </div>
    <p>
  </div>
</footer>

这是我的css

footer #footer {
  width:100%;
  background-color: #222;
  padding: 60px 0px;
}

footer #bottom-footer{
  background-color: white;
}

Answer 1

我不知道这是什么非常困难

这是Code

HTML

<div class="content">
Here is the Content
</div>

<footer>
  <div id="footer">
    <div class="inner-wrap clearfix">
      <div class="section about">
Footer 1
      </div>
  </div>
  </div>



   <div id="bottom-footer">
    <div class = "inner-wrap clearfix">
     Footer 2
    </div>

  </div>

</footer>

CSS

body{margin:0;padding:0}
.content{background:white; width:100%; height:700px}
#footer{    background: #2c3036;width:100%; height:300px}
#bottom-footer{background: #16a085;height:40px}

Answer 2

更改＃bottom-footer以匹配#footer

footer #bottom-footer{
  width: 100%;
  background-color: white;
  padding: 60px 0px;
}

这可能会让你成为#footer的＃bottom-footer。

修改：注意到您尚未关闭div标记<div class="inner-wrap clearfix">

Answer 3

您缺少div代码。

它应该是这样的：

<footer>
  <div id="footer">
    <div class="inner-wrap clearfix">
      <div class="section about">

      </div> <!--- Missing tag --->
   </div>
  </div>
  <div id="bottom-footer">
    <div class = "inner-wrap clearfix">
      <p class="fotter-quote">
        <em>
          <i class = "fa fa-quote-left"></i>just live your life<i class = "fa fa-quote-right"></i>
        </em>

      </p>
    </div>
    <p>
  </div>
</footer>

此外，这里还有一些CSS需要添加才能获得您想要的结果：

footer #bottom-footer{
 padding:5px;
  overflow: hidden;
  background-color: white;
}

jsFiddle

Answer 4

尝试使用以下代码可能会对您有所帮助。

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

footer{
     background-color: #1fa67a;
    border-top: 1px solid #1b926c;
 font-family : open sans;
}

.widget h3{
  margin : 5px;
  font-weight: bold;
  font-size: 16px;
  color: #fff; 
  text-shadow: 1px 1px #000;
}

.widget ul{
  margin-left : -25px;
}
.widget ul li {
  list-style-type : none;   
}

.widget ul li a{
   padding-left: 5px;
   color: #fff;
   text-shadow: 1px 1px #000;
}

.copyright{
  background-color : #000;
  padding : 5px;
  color : #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<footer>
  <div class="row">
      <div class="col-sm-3 col-xs-3 col-md-3">
      <div class="widget">
        <h3>Products</h3>
        <ul>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product1</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product2</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product3</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product4</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product5</a></li>
        </ul>
      </div>
      </div>
      <div class="col-sm-3 col-xs-3 col-md-3">
      <div class="widget">
        <h3>Products</h3>
        <ul>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product1</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product2</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product3</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product4</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product5</a></li>
        </ul>
      </div>
      </div>
      <div class="col-sm-3 col-xs-3 col-md-3">
      <div class="widget">
        <h3>Products</h3>
        <ul>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product1</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product2</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product3</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product4</a></li>
          <li><a href="#" target="_self"><i class="fa fa-angle-right"></i> Product5</a></li>
        </ul>
      </div>
      </div>
      <div class="col-sm-3 col-xs-3 col-md-3">
      <div class="widget">
        <h3>partners</h3>
        <ul>
          <li><a href="#" target="_self"><img src="https://s3.buysellads.com/1298241/309950-1454187271.png" class="img-responsive"></a></li>
        </ul>
      </div>
      </div>
    </div>
    <div class="copyright">
    <div class="row">
      <div class="col-sm-6">
         © 2016
      </div>
      <div class="col-sm-6">
        <span class="pull-right">powerd by <a>xyz.com</a></span>
      </div>
    </div>
</div>
</footer>

如何获得双脚？

4 个答案: