html - 折叠页脚的背景

Question

当它折叠时，我在为所有页脚添加背景颜色时遇到了一些麻烦，页脚中间有一些空白...我试过这个 CSS 代码 {background-size: 100% 100%;

{
  height: 317px;
  background-color: #3b3b3b;
  margin-top: 200px;
  padding: 4% 0;
}
.no a {
  color: white;
}
footer .container {
  height: 317px;
  background-color: #3b3b3b;
  margin-top: 200px;
  width: 1500px;
}
footer ul,
.taber {
  margin-top: 100px;
}
.last,
.no {
  margin-top: 100px;
}
.last img {
  margin-bottom: 34px;
}
footer ul {
  margin: 0;
  padding: 0 0 0;
}
footer ul li,
.taber {
  font-size: 16px;
  font-family: Aleo;
  color: white;
  list-style: none;
  margin-bottom: 10px;
  font-size: 16px
}
@media (max-width: 723px) {
  .taber {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    cursor: auto;
    color: yellow;
    background-color: #3b3b3b;
    background-size: 100% 100%;
  }
  .taber.collapsed:after {
    content: "+";
    float: right;
    font-size: 22px;
    margin-right: 10px;
  }
  .taber:after {
    content: "-";
    float: right;
    font-size: 22px;
    margin-right: 10px;
  }
  .panel-collapse {
    padding-left: 15px;
    padding-right: 15px;
  }
  #collapseOne,
  #collapsetwo,
  #collapsethree,
  #collapsefour {
    background-color: #3b3b3b;
  }
  footer >.container {
    padding-left: 0;
    padding-right: 0px;
  }

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-2 col-md-offset-2 col-sm-3">
        <div data-toggle="collapse" class="taber" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          New York Restaurant
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>
            <li>3926 Anmoore Road</li>
            <li>New York, NY 10014</li>
            <li><strong>02.94.23.9.66</strong>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-2 col-sm-2">
        <div class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapseOne">
          France Restaurant
        </div>
        <div id="collapsetwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>
            <li>68, rue de la Coronne</li>
            <li>75002 PARIS</li>
            <li><strong>02.94.23.9.66</strong>
            </li>
          </ul>
        </div>
      </div>

      <div class="no col-md-2 col-sm-2">
        <div id="collapsethree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>
            <li><a href="#">Blog</a>
            </li>
            <li><a href="#">Careers</a>
            </li>
            <li><a href="#">Privacy Policy</a>
            </li>
            <li><a href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="col-md-3 col-sm-3">
        <div class="last">
          <img src="img/logo_footer.png" alt="">
        </div>
        <div id="collapsefour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>
            <li>© All Rights Reserved 2014.</li>
            <li>Find More at <strong>Pixelhint.com</strong>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </div>
</footer>

Answer 1

看起来您可能正在处理 collapsing-margin

下面是使用以下规则(一种方式)对其进行测试的片段:

  /* hold margins within containers */    
 .row>*>* {border:1px transparent solid;}

代码段已更新以运行:

@media (max-width: 723px) {
  .taber {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    cursor: auto;
    color: yellow;
    background-color: #3b3b3b;
    background-size: 100% 100%;
  }
  .taber.collapsed:after {
    content: "+";
    float: right;
    font-size: 22px;
    margin-right: 10px;
  }
  .taber:after {
    content: "-";
    float: right;
    font-size: 22px;
    margin-right: 10px;
  }
  .panel-collapse {
    padding-left: 15px;
    padding-right: 15px;
  }
  #collapseOne,
  #collapsetwo,
  #collapsethree,
  #collapsefour {
    background-color: #3b3b3b;
  }
  
  /* hold margins within containers */
 .row>*>* {border:1px transparent solid;}
 .last img {display:block}/* just to erase the gap it produces here */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>

  <div class="container">
    <div class="row">
      <div class="col-md-2 col-md-offset-2 col-sm-3">

        <div data-toggle="collapse" class="taber" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          New York Restaurant
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>

            <li>3926 Anmoore Road</li>
            <li>New York, NY 10014</li>
            <li><strong>02.94.23.9.66</strong>
            </li>


          </ul>
        </div>
      </div>

      <div class="col-md-2 col-sm-2">

        <div class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapseOne">
          France Restaurant
        </div>

        <div id="collapsetwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>
            <li>68, rue de la Coronne</li>
            <li>75002 PARIS</li>
            <li><strong>02.94.23.9.66</strong>
            </li>


          </ul>
        </div>
      </div>

      <div class="no col-md-2 col-sm-2">


        <div id="collapsethree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>
            <li><a href="#">Blog</a>
            </li>
            <li><a href="#">Careers</a>
            </li>
            <li><a href="#">Privacy Policy</a>
            </li>
            <li><a href="#">Contact</a>
            </li>


          </ul>
        </div>
      </div>

      <div class="col-md-3 col-sm-3">

        <div class="last">
          <img src="img/logo_footer.png" alt="">
        </div>
        <div id="collapsefour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul>
            <li>© All Rights Reserved 2014.</li>
            <li>Find More at <strong>Pixelhint.com</strong>
            </li>



          </ul>
        </div>
      </div>
    </div>
  </div>
  </div>
</footer>