个人中心
gpt4 book ai didi

html - 跨不同屏幕宽度的固定导航栏高度

转载 作者：行者123 更新时间：2023-11-28 04:34:57 25 4
gpt4 key购买 nike

我完成了一个 Bootstrap 元素，导航栏高度在屏幕宽度上保持一致:这太棒了。

这是一个新元素，我自己不知道怎么做。我只使用来自 bootstrap 的网格系统 - 没有别的。

当我使用 chrome 检查器工具更改屏幕宽度时，需要的是固定的导航栏高度。我很难实现的东西 - 即使在只有 index.html 和 style.css 的不同清洁文件中也是如此。

在这个元素中我将首先使用移动设备，所以不要伤害你的眼睛并且我使用的是 320 像素的视口(viewport)。*

Fiddle: https://jsfiddle.net/m9b9zba3/

HTML 和 CSS:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Band Index Page</title>
        <link href="css/reset.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap-grid-only.min.css" rel="stylesheet" type="text/css">
        <link href="css/main.css" rel="stylesheet" type="text/css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">
      </head>
      <body>
        <header>
          <div class="band-hero col-xs-12">
            <div class="band-member-grid"><img src="../img/placeholder-sm.jpg" class="img-responsive">
              <div class="img-overlay content">
                <div class="member">
                  <div class="name"> </div>
                  <div class="role"></div>
                </div>
                <div class="member">
                  <div class="name"></div>
                  <div class="role"></div>
                </div>
                <div class="member">
                  <div class="name"></div>
                  <div class="role"></div>
                </div>
                <div class="member">
                  <div class="name"></div>
                  <div class="role"></div>
                </div>
                <div class="member">
                  <div class="name"></div>
                  <div class="role"></div>
                </div>
              </div>
            </div>
          </div>
        </header>
        <section class="col-sm-12">
          <div class="upcmoing-gigs content">
            <div class="row">
              <article class="up-gig col-xs-4">
                <h4>date</h4>
                <h7>where</h7>
                <p>some details</p>
              </article>
              <article class="up-gig col-xs-4">
                <h4>date1</h4>
                <h7>where</h7>
                <p>some details</p>
              </article>
              <article class="up-gig col-xs-4">
                <h4>date2</h4>
                <h7>where</h7>
                <p>some details</p>
              </article>
            </div>
            <div class="row">
              <article class="up-gig col-xs-4">
                <h4>date3</h4>
                <h7>where</h7>
                <p>some details</p>
              </article>
              <article class="up-gig col-xs-4">
                <h4>date4</h4>
                <h7>where</h7>
                <p>some details</p>
              </article>
              <article class="up-gig col-xs-4">
                <h4>date5</h4>
                <h7>where</h7>
                <p>some details</p>
              </article>
            </div>
          </div>
        </section>
        <section>
          <div class="logo"></div>
          <div class="blog-news col-xs-12">
            <h2 class="content">Latest news...</h2>
            <article></article>
          </div>
        </section>
        <footer>
          <nav class="navbar col-xs-12 row">
            <input type="checkbox"><span class="arrow-up col-xs-2"></span>
            <div class="content logo col-xs-2">Logo</div>
            <ul class="nav-right col-xs-12">
              <li class="nav-item content"><a>4</a></li>
              <li class="nav-item content"><a>Contact</a></li>
              <li class="nav-item content"><a>About</a></li>
              <li class="nav-item content"><a>Home</a></li>
            </ul>
          </nav>
        </footer>
      </body>
    </html>
CSS:
    html {
        margin: 0;
        padding: 0;
        height: 100%
    }

    body {
        margin: 0;
        position: relative;
        height: 100%;
        font-size: 18px;
        font-family: 'Oswald', sans-serif;
        font-weight: 100
    }

    input {
        padding: 0;
        margin: 0
    }

    img {
        display: block;
        padding: 0;
        margin: 0
    }

    .content {
        font-size: 3em
    }

    .row {
        margin: 0;
        padding: 0
    }

    img.img-responsive {
        width: 100%;
        height: auto
    }

    .up-gig {
        box-sizing: border-box;
        padding: 1%;
        border: 2px solid #000
    }

    .navbar {
        display: block;
        overflow: hidden;
        list-style-type: none;
        position: fixed;
        bottom: 0;
        background: #545454;
        list-style: none
    }

    .navbar .logo {
        width: 180px;
        height: 120px
    }

    .arrow-up {
        width: 0;
        height: 0;
        border-left: 45px solid transparent;
        border-right: 45px solid transparent;
        border-bottom: 45px solid #000;
        margin: 3% 4% 0;
        z-index: 1;
        float: right
    }

    .navbar li {
        height: 120px;
        border-radius: 5px;
        border-sizing: border-box;
        position: relative
    }

    .navbar li:nth-child(odd) {
        background: #828282
    }

    .navbar ul li a {
        display: inline-block;
        margin: 34px
    }

    .navbar input[type=checkbox] {
        background-color: #800080;
        opacity: 0;
        width: 150px;
        height: 120px;
        position: absolute;
        right: 2%;
        z-index: 3
    }

    .nav-item {
        margin: auto 0;
        width: 100%;
        text-align: center;
        font-weight: 300
    }

    .navbar input {
        float: right
    }

    .nav-left {
        float: left
    }

    .nav-right {
        float: right
    }

    .navbar input[type=checkbox] ~ ul {
        height: 0;
        -webkit-transition: height .3s linear;
        transition: height .3s linear
    }

    .navbar input[type=checkbox]:checked ~ ul {
        height: 480px;
        -webkit-transition: height .3s ease-in-out;
        transition: height .3s ease-in-out
    }

    .navbar input[type=checkbox] ~ span {
        -webkit-transition: -webkit-transform .3s ease-in-out;
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
    }

    .navbar input[type=checkbox]:checked ~ span {
        margin-top: 4.3%;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        -webkit-transition: -webkit-transform .3s linear;
        transition: -webkit-transform .3s linear;
        transition: transform .3s linear;
        transition: transform .3s linear, -webkit-transform .3s linear
    }

附言我还使用复选框 hack 在较小的屏幕上切换导航栏。我无法真正让网站按我想要的方式扩展，但是嗯，我稍后会探讨这个问题。提前致谢:)

最佳答案

如果你想让 nav 的 height 保持一致，你需要给它一个 height 值，并确保内部元素适应它。

.navbar {
        display: block;
        overflow: hidden;
        list-style-type: none;
        position: fixed;
        bottom: 0;
        background: #545454;
        list-style: none
        height: 150px; /* Put your desired height here*/
    }

如果这不是您需要的，请再解释一下；)

关于html - 跨不同屏幕宽度的固定导航栏高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41538751/

25 4 0
文章推荐： html - 带有/非固定标题的固定侧导航栏在滚动后在顶部留下间隙
文章推荐： javascript - 使用 jquery 的下拉导航链接未在 mvc 中加载有效的 anchor 链接
文章推荐： javascript - Equal Columns JS 忽略内容
文章推荐： javascript - 使用异步瀑布时绑定(bind)回调函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com