Question

我的代码可以响应多种屏幕分辨率，但是在iPad和Kindle Fire HDX上，页脚下方有一个很大的空白。

这是在iPad上的外观

这就是Kindle Fire HDX的外观

这是我在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%;
}

}

什么可能导致此问题？

Answer 1

您的内容不足以填满整个视口。您可以完全定位页脚。或为您的内容指定最小高度。或使用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>

Answer 2

主要是因为页面的内容确实占据了屏幕的所有视图空间。

如果您希望页脚停留在底部，则可以在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 */
}

在某些屏幕分辨率上不需要的空格

2 个答案: