第三个div元素隐藏在页脚下方

时间：2017-02-17 16:29:46

标签： html css

隐藏在页脚下方的第三个div元素如下所示：https://www.screencast.com/t/FAb4WyXfR

如何让第三个div元素完整显示？

CSS / HTML：

＆＃13;
＆＃13; 
.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

.price_by_night {
  color: #FF5A5F;
  border: 4px solid #FF5A5F;
  border-radius: 50%;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  margin: 0;
  float: right;
  line-height: 60px;
}

.information {
  height: 80px;
  border-top: #DDDDDD 1px solid;
  border-bottom: #DDDDDD 1px solid;
}

.max_guest {
  background-image: url("images/icon_group.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_rooms {
  background-image: url("images/icon_bed.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_bathrooms {
  background-image: url("images/icon_bath.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  height: auto;
  display: inline-block;
  margin: 7px;
  line-height: 100px;
  text-align: center;
}

.user {
  margin-bottom: 10px;
}

.description {
  text-align: left;
  float: left;
}

/*footer*/
footer {
    position:fixed;
    height:60px;
    width:100%;
    line-height:60px;
    border-top: solid 1px #CCCCCC;
    bottom:0px;
    background-color:white;
    text-align:center;
}
＆＃13; 
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="8-places.css" media="all">
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
  </head>
  <body>
    <header>
    </header>


  <section class="places">
    <h1>Places</h1>
    <article class="home">
      <div class="price_by_night">$80</div>
      <h2>Home</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> John Lennon</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="apartment">
      <div class="price_by_night">$65</div>
      <h2>Apartment</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Tina Fey</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="dorm">
      <div class="price_by_night">$20</div>
      <h2>Dorm</h2>

      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Lorie</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
  </section>
    </div>

    <footer>
      Footer
    </footer>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

您可以为最后<article>添加一个底部边距，该边距高于或高于您的页脚：

article:last-of-type {
    margin-bottom: 70px;
}


.places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.places h1 {
  align-content: top-left;
  font-size: 30px;
  width: 100%;
}

.places article {
  width: 390px;
  border: #FF5A5F 1px solid;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
}

.places article h2 {
  font-size: 30px;
  text-align: center;
}

.price_by_night {
  color: #FF5A5F;
  border: 4px solid #FF5A5F;
  border-radius: 50%;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  margin: 0;
  float: right;
  line-height: 60px;
}

.information {
  height: 80px;
  border-top: #DDDDDD 1px solid;
  border-bottom: #DDDDDD 1px solid;
}

.max_guest {
  background-image: url("images/icon_group.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_rooms {
  background-image: url("images/icon_bed.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  display: inline-block;
  margin: 7px;
  line-height: 110px;
  text-align: center;
}

.number_bathrooms {
  background-image: url("images/icon_bath.png");
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-position: center top;
  width: 100px;
  height: auto;
  display: inline-block;
  margin: 7px;
  line-height: 100px;
  text-align: center;
}

.user {
  margin-bottom: 10px;
}

.description {
  text-align: left;
  float: left;
}


/*footer*/

footer {
  position: fixed;
  height: 60px;
  width: 100%;
  line-height: 60px;
  border-top: solid 1px #CCCCCC;
  bottom: 0px;
  background-color: white;
  text-align: center;
}

article:last-of-type {
margin-bottom: 70px;
}
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="8-places.css" media="all">
  <link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>

<body>
  <header>
  </header>


  <section class="places">
    <h1>Places</h1>
    <article class="home">
      <div class="price_by_night">$80</div>
      <h2>Home</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> John Lennon</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="apartment">
      <div class="price_by_night">$65</div>
      <h2>Apartment</h2>
      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Tina Fey</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
    <article class="dorm">
      <div class="price_by_night">$20</div>
      <h2>Dorm</h2>

      <div class="information">
        <div class="max_guest">3 guests</div>
        <div class="number_rooms">2 rooms</div>
        <div class="number_bathrooms">1 bathroom</div>
        <div class="user"><b>Owner:</b> Lorie</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </article>
  </section>
  </div>

  <footer>
    Footer
  </footer>
</body>

</html>

答案 1 :(得分：0)

向article.dorm添加100px底部边距

article.dorm {margin-bottom: 100px; }

我正在响应地查看它，实际上你需要：

.places {margin-bottom: 100px; }

答案 2 :(得分：0)

只需在身体底部添加一些填充

body{
 padding-bottom:50px;
}

答案 3 :(得分：0)

如果您希望此对象超过页脚，则仅将 var teachers = db.teachers.Where(a => a.Groups.Any(g => g.id == groupid)).ToList(); 更改为高于页脚的默认值。

答案 4 :(得分：0)

通过在页脚上使用position: fixed，您将其从文档流中删除，这就是为什么它不“尊重”所述流程中的其他元素而是放在顶部。 但是，由于页脚高度固定为60px，您可以在.places部分添加底部边距（因为那个包裹所有文章）以进行补偿。

.places {margin-bottom: 60px}

答案 5 :(得分：0)

您只需添加

即可 
   body {
     padding-bottom: 60px;
   }

由于您的footer是固定元素，因此您的body不会保留任何空格。它只是在最底层的所有内容之上。 padding-bottom: 60px只需在body的底部添加额外的60px（其中没有任何内容）（因为它是填充），然后您的footer就位于其上方。
另外，您的粘贴示例有一个结束div标签（</div）太多了。

相关问题
最新问题