页脚背景不会工作

时间：2017-01-01 22:44:41

标签： html css twitter-bootstrap

我试图为学校建立一个简单的网站，但我的页脚背景太大了。

这是我的HTML 

<div class="container-fluid">

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portofolio</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>
  <article>

    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>
  <article>

    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <article>
    <div class="col-md-4">
      <img src="images/nature.jpg">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
      </p>
    </div>
  </article>

  <div class="footer">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. </p>
  </div>

</div>

以下是我的CSS如果有人知道如何解决它请告诉我 我试图改变某些东西，但我的背景一直在顶部显示

background-color:#d2d8e0;
}

nav {
  background-color: #64f48a;
  float: center;
  padding: 20px 0px 0px 350px;
}

nav ul li {
  padding: 0px 50px 20px 0px;
  display: inline-block;
}

nav ul li a {
  color: #f0f0f0;
}

nav ul li:hover {
  background-color: black;
}

article {
  padding: 0px 0px 0px 50px;
}

article img {
  padding: 0px 0px 0px 50px;
}

article h1 {
  text-align: center;
  font-size: 20px;
  padding: 0px 0px 0px 0px;
}

article p {
  text-align: center;
  font-size: 15px;
}

.footer {
  background-color: red;
}

.footer p {
  text-align: center;
  color: #fff;
}

3 个答案:

答案 0 :(得分：0)

如果您计划在底部放置粘性页脚，则需要在主体上添加底部填充，以便将页脚向下推。您还需要确保实际在页脚上设置高度。

如果您想了解更多有关如何执行此操作的信息，请查看以下文章：

https://css-tricks.com/snippets/css/sticky-footer/

答案 1 :(得分：0)

这是浮动应用于引导列的问题，您应该使用row包裹您的列（请参阅Grid System）。

您也可以像这样向页脚添加显示属性，或者添加一个列以封闭页脚：<div class="col-md-12">。

.footer {
  background-color: red;
  display: inline-block;
  width: 100%;
}

工作示例，添加.row div。 

nav {
  background-color: #64f48a;
  float: center;
  padding: 20px 0px 0px 350px;
}
nav ul li {
  padding: 0px 50px 20px 0px;
  display: inline-block;
}
nav ul li a {
  color: #f0f0f0;
}
nav ul li:hover {
  background-color: black;
}
article {
  padding: 0px 0px 0px 50px;
}
article img {
  padding: 0px 0px 0px 50px;
}
article h1 {
  text-align: center;
  font-size: 20px;
  padding: 0px 0px 0px 0px;
}
article p {
  text-align: center;
  font-size: 15px;
}
.footer {
  background-color: red;
}
.footer p {
  text-align: center;
  color: #fff;
  padding: 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">

    <nav>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Services</a>
        </li>
        <li><a href="#">Portofolio</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </nav>

    <article>
      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>

    <article>
      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>

    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>

    <article>
      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>
    <article>

      <div class="col-md-4">
        <img src="http://placehold.it/150x150/000/fff">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
        </p>
      </div>
    </article>

  </div>

  <div class="footer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.</p>
  </div>

</div>

答案 2 :(得分：-1)

从padding-bottom: 200px;

中删除.footer p
相关问题
最新问题