Нежелательные пробелы на некоторых разрешениях экрана - PullRequest
Новая
       5

Нежелательные пробелы на некоторых разрешениях экрана

0 голосов
/ 02 декабря 2018

Мой код реагирует на многие разрешения экрана, но на iPad и Kindle Fire HDX есть большой пробел ниже нижнего колонтитула.

Так выглядит на iPad enter image description here

А вот так это выглядит на Kindle Fire HDX enter image description here

Вот ссылка на мой код на codepen https://codepen.io/stel/pen/BGMXxq

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mess Order</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<div class='logo-container'>
<img src='mess-order-logo.svg' alt='application logo'>
</div>
<i class="fa fa-bars" id='menu-bar'></i>
</nav>

<div class='time'>
<p>Monday 26 November 2018</p>
<p>TODAY'S OFFERS</p>
</div>

<div id=meal-parent-container>

<div class='meal-container'>
<div class='meal-img'>
<img src='jollof.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Jollof Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>

<div class='meal-container'>
<div class='meal-img'>
<img src='gobe.jpeg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fried Plantain with Beans</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>


<div class='meal-container'>
<div class='meal-img'>
<img src='plain-rice.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Plain Rice with Chicken</span>
 <button>
<span class='order'>Order Now</span>
</button>
</div>
</div>

<div class='meal-container'>
<div class='meal-img'>
<img src='banku-and-Tilapia.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Banku With Tilapia</span>
<button>
<span class='order'>Order Now</span>
</button> 
</div>
  </div>
<div class='meal-container'>
  <div class='meal-img'>
  <img src='Fufu-and-fish.jpg' alt='picture of jollof rice'>
  </div>
  <div class=meal-description>
  <span>Fufu with Light Soup</span>
  <button>
  <span class='order'>Order Now</span>
  </button>
  </div>
  </div>   
  </div>

  <div class='special-offers'>
  <p>Special Offers</p>
  </div>
  <footer>
Made with love &copy; 2018
  </footer>
  </body>
  </html>



body,html{
  height: 100%;
  margin:0;
  font-family: 'Merriweather', serif;
}

body{
  padding-top: 40px;
  background: #136a8a;*/  /* fallback for old browsers
  background: -webkit-linear-gradient(to right, #267871, #136a8a);  /* Chrome 10-25, Safari 5.1-6*/
  background: linear-gradient(to right, #267871, #136a8a);
}

nav{
  background-color: #16222A;
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size:160%;
}

#menu-bar{
  padding: 1.2%;
  color:#999999;
}

.logo-container{
  width:20%;
}
.logo-container img{
  max-width:100%;
  margin: 0 auto;
}


.meal-container{
  background-color:white;
  width:90%;
  margin:0 auto;
  margin-top:1.3em;
  padding:0.5em;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.meal-img{
  width:40%;
}

.meal-img img{
  max-width:100%;
}

.meal-description{
  display: flex;
  flex-direction: column;
  align-items:flex-start;
 justify-content: space-between;
  width:50%;
}

#meal-parent-container{

  display:flex;
  flex-direction: column;
  padding-top: 5%;

}

.time, .special-offers{
  background-color:white;
  width:90%;
  margin:0 auto;
  margin-top:1.3em;
  padding:0.5em;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  text-align: center;
}

.special-offers{
  margin-bottom: 1.3em;
}

button{
  padding: 0.8em;
  color: white;
  background: #16222A;
  border: 0px;
}

footer{

  background: #16222A;
  padding:1em;
  text-align: center;
  color: white;
  font-size: 120%;
}

@media screen and (min-width:410px) {

  .time{
      margin-top:1.5em;
  }

  .meal-description{
    padding:0.7em;
  }

  .logo-container{
    width:18%;
  }

}
@media screen and (min-width:430px) {

  .time{
      margin-top:1.8em;
  }

  .meal-description{
    padding:1em;
  }

  .logo-container{
    width:16%;
  }

}

@media screen and (min-width:500px) {

  .time{
      margin-top:2.3em;
      width:70%;
  }
  .meal-container{
    width:80%;
}
.meal-img{
  max-width: 37%;
}
  .meal-description{
    padding:1.2em;
  }

  .special-offers{
    width: 80%;

  }

  .logo-container{
    width:16%;
  }

}

@media screen and (min-width:600px) {
#meal-parent-container{
  flex-direction: row;
  flex-wrap: wrap;
}
.meal-container{
  width:45%;
}


.time{
    margin-top:2.6em;
}

.logo-container{
  width:12%;
}

}

@media screen and (min-width:800px) {


.time{
    margin-top:2.9em;
}

.logo-container{
  width:10%;
}

}

@media screen and (min-width:900px) {


  .time{
      width:60%;
  }

  .special-offers{
    width: 70%;

  }

.logo-container{
  width:8%;
}

}

@media screen and (min-width:1000px) {


  .time{
      width:50%;
  }

  .special-offers{
    width: 60%;

  }

.logo-container{
  width:6%;
}

}

Что может быть причиной этой проблемы?

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Вашего контента просто недостаточно для заполнения всего окна просмотра.Вы можете разместить свой нижний колонтитул абсолютно.Или добавьте минимальную высоту вашему контенту.Или используйте flexbox, чтобы увеличить область содержимого.

Вот ручка, на которой можно поиграть с решением flexbox: https://codepen.io/Sixl/pen/zMbYxL

Для новой оболочки main есть флекс-растениесодержание. 

body,
html {
  height: 100%;
  margin: 0;
  font-family: 'Merriweather', serif;
}

body {
  background: #136a8a;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #267871, #136a8a);  /* Chrome 10-25, Safari 5.1-6*/
  background: linear-gradient(to right, #267871, #136a8a);
}

.container {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
}

main {
  flex-grow: 1;
  padding-top: 40px
}

nav {
  background-color: #16222A;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 160%;
}

#menu-bar {
  padding: 1.2%;
  color: #999999;
}

.logo-container {
  width: 20%;
}

.logo-container img {
  max-width: 100%;
  margin: 0 auto;
}

.meal-container {
  background-color: white;
  width: 90%;
  margin: 0 auto;
  margin-top: 1.3em;
  padding: 0.5em;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.meal-img {
  width: 40%;
}

.meal-img img {
  max-width: 100%;
}

.meal-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 50%;
}

#meal-parent-container {
  display: flex;
  flex-direction: column;
  padding-top: 5%;
}

.time,
.special-offers {
  background-color: white;
  width: 90%;
  margin: 0 auto;
  margin-top: 1.3em;
  padding: 0.5em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  text-align: center;
}

.special-offers {
  margin-bottom: 1.3em;
}

button {
  padding: 0.8em;
  color: white;
  background: #16222A;
  border: 0px;
}

footer {
  background: #16222A;
  padding: 1em;
  text-align: center;
  color: white;
  font-size: 120%;
}

@media screen and (min-width:410px) {
  .time {
    margin-top: 1.5em;
  }
  .meal-description {
    padding: 0.7em;
  }
  .logo-container {
    width: 18%;
  }
}

@media screen and (min-width:430px) {
  .time {
    margin-top: 1.8em;
  }
  .meal-description {
    padding: 1em;
  }
  .logo-container {
    width: 16%;
  }
}

@media screen and (min-width:500px) {
  .time {
    margin-top: 2.3em;
    width: 70%;
  }
  .meal-container {
    width: 80%;
  }
  .meal-img {
    max-width: 37%;
  }
  .meal-description {
    padding: 1.2em;
  }
  .special-offers {
    width: 80%;
  }
  .logo-container {
    width: 16%;
  }
}

@media screen and (min-width:600px) {
  #meal-parent-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .meal-container {
    width: 45%;
  }
  .time {
    margin-top: 2.6em;
  }
  .logo-container {
    width: 12%;
  }
}

@media screen and (min-width:800px) {
  .time {
    margin-top: 2.9em;
  }
  .logo-container {
    width: 10%;
  }
}

@media screen and (min-width:900px) {
  .time {
    width: 60%;
  }
  .special-offers {
    width: 70%;
  }
  .logo-container {
    width: 8%;
  }
}

@media screen and (min-width:1000px) {
  .time {
    width: 50%;
  }
  .special-offers {
    width: 60%;
  }
  .logo-container {
    width: 6%;
  }
}
<div class="container">
  <nav>
    <div class='logo-container'>
      <img src='https://image.ibb.co/iMNFxy/noknoknok.png' alt='application logo'>
    </div>
    <i class="fa fa-bars" id='menu-bar'></i>
  </nav>
  <main>
    <div class='time'>
      <p>Monday 26 November 2018</p>
      <p>TODAY'S OFFERS</p>
    </div>

    <div id=meal-parent-container>

      <div class='meal-container'>
        <div class='meal-img'>
          <img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
        </div>
        <div class=meal-description>
          <span>Jollof Rice with Chicken</span>
          <button>
  <span class='order'>Order Now</span>
</button>
        </div>
      </div>

      <div class='meal-container'>
        <div class='meal-img'>
          <img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
        </div>
        <div class=meal-description>
          <span>Fried Plantain with Beans</span>
          <button>
  <span class='order'>Order Now</span>
</button>
        </div>
      </div>


      <div class='meal-container'>
        <div class='meal-img'>
          <img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
        </div>
        <div class=meal-description>
          <span>Plain Rice with Chicken</span>
          <button>
  <span class='order'>Order Now</span>
</button>
        </div>
      </div>

      <div class='meal-container'>
        <div class='meal-img'>
          <img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
        </div>
        <div class=meal-description>
          <span>Banku With Tilapia</span>
          <button>
  <span class='order'>Order Now</span>
</button>
        </div>
      </div>


      <div class='meal-container'>
        <div class='meal-img'>
          <img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
        </div>
        <div class=meal-description>
          <span>Fufu with Light Soup</span>
          <button>
  <span class='order'>Order Now</span>
</button>
        </div>
      </div>

    </div>

    <div class='special-offers'>
      <p>Special Offers</p>
    </div>

  </main>

  <footer>
    Made with love &copy; 2018
  </footer>

</div>
0 голосов
/ 02 декабря 2018

Это происходит главным образом потому, что содержимое страницы занимает все пространство просмотра экрана.

Если вы хотите, чтобы нижний колонтитул придерживался нижней части, вы можете добавить к нему фиксированное положение в своемcss: 

footer {
  background: #16222A;
  padding:1em;
  text-align: center;
  color: white;
  font-size: 120%;

  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

ОБНОВЛЕНИЕ

Чтобы сместить содержимое, чтобы он не был покрыт нижним колонтитулом, можно добавить содержимое страницы в контейнер div отступ до нижней части элемента контейнера: 

<div class="container>
    ...
    <!-- Your page content -->
</div>

И в вашем файле CSS: 

,container {
    width: 100%;
    height: 100%;
    padding-bottom: 60px; /* Adjust the value to match the height of the footer */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...