html - 如何在页面底部正确对齐移动内容？

标签 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 的开发控制台中使用谷歌浏览器设备模拟器，它不在屏幕上。请帮忙。谢谢。

最佳答案

好的；在与库、查询和属性斗争了一段时间之后，我终于成功了。

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

最重要的是，我删除了您为图标定义的绝对定位，将它们组合在一起并使它们的容器成为一个 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>

关于html - 如何在页面底部正确对齐移动内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55858663/

上一篇：javascript - Slick Slider Carousel 同步行重叠(w/JSFiddle)。我难住了

下一篇：css - 如何水平对齐 bootstrap 4 导航菜单？

相关文章：

html - 我如何让 Navbar 居中？

javascript - 如何将单选按钮逻辑放入 *ngFor 中？

css - Bootstrap 模态背景在 chrome 中创建模型...在 firefox 中工作

html - 创建具有多个边框的按钮

jquery - 最简单的jquery有div "position:fixed"到右下角(总是..就像向下滚动)？

html - 强制 TinyMCE 与父级高度相同

javascript - 页面上加载了超过 100 个 soundcloud iframe 小部件

javascript - 如何使用 Mechanize 处理 JavaScript？

html - 设置 MUI 选择宽度？

javascript - jQuery 在满足某些条件时调整窗口大小和加载文档

©2024 IT工具网  联系我们