如何在页面底部正确对齐移动设备的内容？

时间：2019-04-25 22:57:39

标签： html css

我有一个专门为移动设备设计的导航栏。这是一个侧面导航栏，它将整个屏幕填充到任何设备。

我已经尝试使用vw和vh之类的东西，但是根据设备的不同而混乱。在我的测试设备上看起来不错，但在大多数其他设备上无法正常工作。

    body,
html {
  margin: auto 0;
  background-image: url(kees-streefkerk-352781-unsplash.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

nav {
  background-color: #222;
  height: 42px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

li {
  list-style: none;
  display: inline-block;
  float: left;
  margin-left: 20px;
  margin-top: -6px;
}

li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

li a img {
  height: 45px;
  margin-top: -12px;
  z-index: -1;
  margin-left: -45px;
}

.nav-first {
  margin-left: 5px;
}

.mobile-button {
  display: none;
  cursor: pointer;
}

.mobile-navbar-text {
  display: none;
}

.facebook,
.twitter,
.instagram {
  display: none;
}


/* Mobile */

@media (max-width: 599px) {
  nav {
    height: 64px;
    position: absolute;
  }
  li a img {
    transform: scale(1.5);
    margin-top: 0px;
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-text {
    display: none;
  }
  .mobile-navbar-text {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid white;
  }
  .mobile-button {
    text-align: center;
    color: white;
    border: none;
    display: block;
    float: right;
    height: 64px;
    width: 62px;
    margin-top: -16px;
    line-height: 65px;
    font-size: 30px;
    font-weight: bold;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-sidenavbar {
    background-color: #222;
    position: fixed;
    right: 0;
    top: 0;
    width: 0px;
    height: 100%;
    z-index: 2;
    transition: 0.4s;
  }

  .instagram,
  .facebook,
  .twitter {
    color: white;
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    white-space: nowrap;
  }

  .closebtn {
    text-decoration: none;
    font-size: 50px;
    color: white;
    font-weight: bold;
    margin-left: 20px;
  }

  .media-links {
    display: inline-flex;
    justify-content: center;
    font-size: 38px;
    position: absolute;
    bottom: 0;
  }
}


/* Tablet */

@media (min-width: 600px) and (max-width: 1023px) {
  nav {
    height: 64px;
    position: absolute;
  }
  li a img {
    transform: scale(2);
    margin-top: 0px;
    margin-left: -32px;
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-text {
    display: none;
  }
  .mobile-navbar-text {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 30px;
    color: white;
    display: block;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid white;
  }
  .mobile-button {
    text-align: center;
    color: white;
    background-repeat: no-repeat;
    border: none;
    display: block;
    float: right;
    font-size: 40px;
    font-weight: bold;
    margin-top: -13px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-sidenavbar {
    background-color: #222;
    position: fixed;
    right: 0;
    top: 0;
    width: 0px;
    height: 100%;
    z-index: 2;
    transition: 0.4s;
  }
  .instagram,
  .facebook,
  .twitter {
    color: white;
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    white-space: nowrap;
  }

  .closebtn {
    text-decoration: none;
    font-size: 9vw;
    color: white;
    font-weight: bold;
    margin-left: 30px;
  }

  .media-links {
    display: inline-flex;
    justify-content: center;
    font-size: 38px;
    position: absolute;
    bottom: 0;
  }
}
<head>
<link rel="stylesheet" href="master.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <nav>
    <ul>
      <li>
        <a href="#"><img src="https://seeklogo.net/wp-content/uploads/2012/10/american-flag-logo-vector.png"></a>
      </li>
      <li><a href="#" class="nav-first navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <span class="mobile-button">&#9776;</span>
    </ul>
  </nav>
  <div class="mobile-sidenavbar">
    <a href="javascript:void(0)" class="closebtn">&times;</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
<div class="media-links">
    <a href="#" class="fa facebook">&#xf082;</a>
    <a href="#" class="fa twitter">&#xf081;</a>
    <a href="#" class="fa instagram">&#xf16d;</a>
</div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="masterjs.js" charset="utf-8"></script>
    <script>$(document).ready(function() {
  $('.mobile-button').on('click touchend', function(event) {
    event.stopPropagation();
    $('.mobile-sidenavbar').css({'width': 100 + '%',});
  });
  $('.closebtn').on('click touchend', function() {
    $('.mobile-sidenavbar').css({'width': 0 + '%',});
  });
});</script>
</body>

如果不让我知道，该代码应该是复制问题所需要的全部。我希望Facebook，Instagram和Twitter图标位于导航栏的底部，而不管设备的大小或什么设备。一个例子是在我的iPhone X上看起来很完美，但是我在iPhone 5 / SE的开发控制台中使用google chromes设备模拟器，但它不在屏幕上。请帮忙。谢谢。

1 个答案:

答案 0 :(得分：0)

好的；在与库，查询和属性进行了一段时间的争斗之后，我终于使它起作用了。

我真的建议您仔细阅读代码，以便您完全掌握我所做的更改。

最重要的是，我删除了为图标定义的绝对位置，将它们分组在一起，并使它们的容器成为flex容器。绝对位置并不是真正必要的，而且会导致很多尴尬和前后不一致的行为，就像您以前所经历的那样。我还删除了您拥有的transform: scale(3)属性，因为这导致图标的大小增加而不增加容器的大小，从而使容器溢出并重叠了其他项目。

我改为增加了font-size，应该对其进行更改以使其看起来更大，毕竟它们是字体图标。

此外，您使用vh和vw单位定义的边距太大，您也应避免使用这些边距。所以我删除了它们。

再次，仔细阅读并与您的代码进行比较，希望我能对您有所帮助；您应该看看 Flexbox ，它也会对您有很大帮助。

$(document).ready(function() {
  $('.mobile-button').on('click touchend', function(event) {
    event.stopPropagation();
    $('.mobile-sidenavbar').css({
      'width': 100 + '%',
    });
  });
  $('.closebtn').on('click touchend', function() {
    $('.mobile-sidenavbar').css({
      'width': 0 + '%',
    });
  });
});
body,
html {
  margin: auto 0;
  background-image: url(kees-streefkerk-352781-unsplash.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

nav {
  background-color: #222;
  height: 42px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

li {
  list-style: none;
  display: inline-block;
  float: left;
  margin-left: 20px;
  margin-top: -6px;
}

li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

li a img {
  height: 45px;
  margin-top: -12px;
  z-index: -1;
  margin-left: -45px;
}

.nav-first {
  margin-left: 5px;
}

.mobile-button {
  display: none;
  cursor: pointer;
}

.mobile-navbar-text {
  display: none;
}

.facebook,
.twitter,
.instagram {
  display: none;
}


/* Mobile */

@media (max-width: 599px) {
  nav {
    height: 64px;
    position: absolute;
  }
  li a img {
    transform: scale(1.5);
    margin-top: 0px;
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-text {
    display: none;
  }
  .mobile-navbar-text {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid white;
  }
  .mobile-button {
    text-align: center;
    color: white;
    border: none;
    display: block;
    float: right;
    height: 64px;
    width: 62px;
    margin-top: -16px;
    line-height: 65px;
    font-size: 30px;
    font-weight: bold;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-sidenavbar {
    background-color: #222;
    position: fixed;
    right: 0;
    top: 0;
    width: 0px;
    height: 100%;
    z-index: 2;
    transition: 0.4s;
  }
  .facebook {
    color: white;
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    white-space: nowrap;
  }
  .twitter {
    color: white;
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    white-space: nowrap;
  }
  .instagram {
    color: white;
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    white-space: nowrap;
  }
  .closebtn {
    text-decoration: none;
    font-size: 50px;
    color: white;
    font-weight: bold;
    margin-left: 20px;
  }
  
  .media-links {
    display: flex;
    justify-content: center;
    font-size: 38px;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}


/* Tablet */

@media (min-width: 600px) and (max-width: 1023px) {
  nav {
    height: 64px;
    position: absolute;
  }
  li a img {
    transform: scale(2);
    margin-top: 0px;
    margin-left: -32px;
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-text {
    display: none;
  }
  .mobile-navbar-text {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 30px;
    color: white;
    display: block;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid white;
  }
  .mobile-button {
    text-align: center;
    color: white;
    background-repeat: no-repeat;
    border: none;
    display: block;
    float: right;
    font-size: 40px;
    font-weight: bold;
    margin-top: -13px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-sidenavbar {
    background-color: #222;
    position: fixed;
    right: 0;
    top: 0;
    width: 0px;
    height: 100%;
    z-index: 2;
    transition: 0.4s;
  }
  .facebook,
  .twitter,
  .instagram {
    color: white;
    padding: 8px 8px 8px 8px;
    font-size: 38px;
    text-decoration: none;
    white-space: nowrap;
  }
  .closebtn {
    text-decoration: none;
    font-size: 9vw;
    color: white;
    font-weight: bold;
    margin-left: 30px;
  }
  .media-links {
    display: flex;
    justify-content: center;
    font-size: 38px;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<body>
  <nav>
    <ul>
      <li>
        <a href="#"><img src="https://seeklogo.net/wp-content/uploads/2012/10/american-flag-logo-vector.png"></a>
      </li>
      <li><a href="#" class="nav-first navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <li><a href="#" class="navbar-text">Sample Text</a></li>
      <span class="mobile-button">&#9776;</span>
    </ul>
  </nav>
  <div class="mobile-sidenavbar">
    <a href="javascript:void(0)" class="closebtn">&times;</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <a href="#" class="mobile-navbar-text">Sample Text</a>
    <div class="media-links">
      <a href="#" class="fa facebook">&#xf082;</a>
      <a href="#" class="fa twitter">&#xf081;</a>
      <a href="#" class="fa instagram">&#xf16d;</a>
    </div>
  </div>
</body>

相关问题
最新问题