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

标签 html css

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

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

CSS/HTML : 

.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;
}
<!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>

最佳答案

您可以在最后一个 <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>

关于html - 隐藏在页脚下方的第三个 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42302862/

上一篇：html - Internet Explorer 和 Chrome 的格式问题

下一篇：javascript - 过渡仅适用于调试

相关文章：

javascript - 使用 jQuery 或 Javascript 更改 svg 速率

html - 文本框内的图标 html css

javascript - 如何在同一页面中使用 anchor 标记转到特定的 div？

javascript - 如何使用 JavaScript 删除 iFrame 中的 HTML 元素

jquery - 每次页面展开时自动将 div 调整为页面宽度

php - 需要向 html 表添加一个删除按钮，以通过一条消息从数据库中删除记录

html - 如何根据其他 2 个元素对齐元素？

html - 表格填充对CSS没有影响

javascript - jQuery Datatable 在更新后将 CSS 添加到单元格

html - 如何在 HTML 的一行中放置两个元素

©2024 IT工具网  联系我们