Altbilgi ostidagi yashirin uchinchi element

This third div element hidden beneath footer as seen here: https://www.screencast.com/t/FAb4WyXfR

Ushbu uchinchi div elementini butunligini ko'rsatish uchun qanday qilib olaman?

CSS/HTML : <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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>
    

  

Places

<div class="price_by_night">$80</div>

Home

<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">Owner: 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>
<div class="price_by_night">$65</div>

Apartment

<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">Owner: 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>
<div class="price_by_night">$20</div>

Dorm

<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">Owner: 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>
    </div>

    
Footer
 
  </body>
</html>
</div> </div>

1

9 javoblar

You can add a bottom margin to the last

that's as tall or taller than your footer with:
article:last-of-type {
    margin-bottom: 70px;
}

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

.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>
  

  

Places

<div class="price_by_night">$80</div>

Home

<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">Owner: 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>
<div class="price_by_night">$65</div>

Apartment

<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">Owner: 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>
<div class="price_by_night">$20</div>

Dorm

<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">Owner: 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>
  </div>

  
Footer
 
</body>

</html>
</div> </div>

1
qo'shib qo'ydi
Ovoz berishga izoh berish kerakmi?
qo'shib qo'ydi muallif j08691, manba
Rahmat @ j08691. Men tanani (padding ...} echimini afzal ko'rmoqdaman.
qo'shib qo'ydi muallif jimmytt, manba

Article.dorm-ga 100px taglik chekkasini qo'shing

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

Buni javob bilan ko'rib chiqdim, aslida kerak:

.places {margin-bottom: 100px; }
0
qo'shib qo'ydi
Rahmatga birinchi javob berganingiz uchun tashakkur.
qo'shib qo'ydi muallif jimmytt, manba

Agar siz ushbu ob'ektni pastki alifboda faqatgina z-index ga o'zgartirishni xohlasangiz, footerning asl qiymatidan yuqoriroq.

0
qo'shib qo'ydi
Rahmat @ user3799089. Men z-indeks haqida ko'proq bilsam, uni ishlatardim, lekin tananing tushuntirishlarini afzal ko'rardim.
qo'shib qo'ydi muallif jimmytt, manba

Agar siz ushbu ob'ektni pastki alifboda faqatgina z-index ga o'zgartirishni xohlasangiz, footerning asl qiymatidan yuqoriroq.

0
qo'shib qo'ydi
Rahmat @ user3799089. Men z-indeks haqida ko'proq bilsam, uni ishlatardim, lekin tananing tushuntirishlarini afzal ko'rardim.
qo'shib qo'ydi muallif jimmytt, manba

tananing pastki qismiga biroz to'ldiring

body{
 padding-bottom:50px;
}
0
qo'shib qo'ydi
Yaxshi javob @Alessandro Messori. Men nima uchun tushunishimga yordam beradigan boshqa kontekstli javoblarni afzal ko'raman.
qo'shib qo'ydi muallif jimmytt, manba

tananing pastki qismiga biroz to'ldiring

body{
 padding-bottom:50px;
}
0
qo'shib qo'ydi
Yaxshi javob @Alessandro Messori. Men nima uchun tushunishimga yordam beradigan boshqa kontekstli javoblarni afzal ko'raman.
qo'shib qo'ydi muallif jimmytt, manba

Siz qo'shishingiz mumkin

   body {
     padding-bottom: 60px;
   }

As Your footer is fixed element, Your body doesn't reserve any space in it. It just goes on top of everything that's in there at the very bottom. padding-bottom: 60px just makes extra 60px at the bottom of Your body where nothing can be in (as it is padding) and then your footer just lies on top of it.
Plus, Your pasted example has one closing div tag () too much.

0
qo'shib qo'ydi
Mening eng sevgan fikrim @Mikelis Baltruksni tushunishning eng oddiy usuli. Rahmat.
qo'shib qo'ydi muallif jimmytt, manba

Siz qo'shishingiz mumkin

   body {
     padding-bottom: 60px;
   }

As Your footer is fixed element, Your body doesn't reserve any space in it. It just goes on top of everything that's in there at the very bottom. padding-bottom: 60px just makes extra 60px at the bottom of Your body where nothing can be in (as it is padding) and then your footer just lies on top of it.
Plus, Your pasted example has one closing div tag () too much.

0
qo'shib qo'ydi
Mening eng sevgan fikrim @Mikelis Baltruksni tushunishning eng oddiy usuli. Rahmat.
qo'shib qo'ydi muallif jimmytt, manba

Olmashgichda manzilni: qattiq dan foydalangan holda uni hujjat oqimidan olib tashladingiz, shuning uchun u ushbu oqim ichidagi boshqa elementlarni "hurmat qilmaydi" va buning o'rniga yuqori qismga qo'yiladi. Biroq, altbilgilar balandligi 60pxga o'rnatilgandan so'ng, siz o'zingizning "joylar" bo'limiga (barcha maqolalar atrofida o'ralganligi sababli) kompensatsiyani to'ldirishingiz mumkin.

.places {margin-bottom: 60px}
0
qo'shib qo'ydi
Sizning yechimingiz yaqin sanaladi. Tana echimini afzal ko'rmoqdaman. Bundan tashqari, nima uchun tushunishimga yordam berish uchun ajoyib kontekstli javob uchun sizga rahmat. Hujjatlar oqimi haqida ko'proq bilmoqchiman.
qo'shib qo'ydi muallif jimmytt, manba