跨不同屏幕宽度的固定导航栏高度答案

【问题标题】：A fixed navbar height across different screen widths跨不同屏幕宽度的固定导航栏高度
【发布时间】：2017-01-08 22:50:26
【问题描述】：

我做了一个引导项目，导航栏的高度在屏幕宽度上是一致的：这太棒了。

这是一个新项目，我自己不知道该怎么做。我只使用引导程序中的网格系统 - 没有别的。

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

我在这个项目中首先使用移动设备，所以不要伤到你的眼睛，我正在使用 320 像素的视口。*

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 在较小的屏幕上切换导航栏。我不能真正让网站按我想要的那样扩展，但是，我稍后会探索。提前谢谢:)

【问题讨论】：

我很困惑。我看到一个固定的左侧导航栏；期待一个顶级酒吧。您希望左侧导航栏具有固定高度吗？
到底是什么问题？请描述当前状态和期望的状态
嗨，问题是当我使用 chrome 检查器工具时，导航栏是响应式的。当我使用 chrome 检查器更改窗口的宽度时，我希望它保持在固定的高度。我仍在尝试一个干净的文件，但没有成功。

标签： html css twitter-bootstrap

【解决方案1】：

如果您希望 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*/
    }

如果这不是你所需要的，请多解释一点；）

【讨论】：

嗨 MarioZ，感谢您的回复！在干净的文件中，它在调整窗口大小时有效，但不适用于检查工具。在这个项目中，两者都不起作用。这很令人沮丧。

【解决方案2】：

我在我的项目中使用了以下代码：

如果你想给出高度，你可以给它作为你想要的静态。

我还使用 clearfix 属性来解决父容器高度折叠的问题。

希望对你有所帮助。

.main-header {
		position: fixed;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0,0,0,.4);
		width: 100%;
		top: 0;
		z-index: 1000;
	}

/* ---- Float clearfix ---- */

	.clearfix::after {
		content: " ";
		display: table;
		clear: both;
	}

<header class="main-header">
		<div class="container clearfix">
			<h1 class="name"><a href="#">Best City Guide</a></h1>
			<ul class="main-nav">
				<li><a href="#">ice cream</a></li>
				<li><a href="#">donuts</a></li>
				<li><a href="#">tea</a></li>
				<li><a href="#">coffee</a></li>
			</ul>
		</div>
	</header><!--/.main-header-->

【讨论】：

您好，感谢您的回复！但是当我用 chrome 检查大小时，包括高度仍然会发生变化。尽管改变了窗口/检查器的宽度，但引导程序 4 有一种方法可以保持高度不变。 - 但我不知道怎么做。

【解决方案3】：

好的，经过一番试验，我找到了解决方案：

我在头部插入了标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

这是我在之前的项目中所做的，它在更改窗口和 chrome 检查器的宽度时使高度保持不变！

你们有这方面的cmet吗？ 好的还是坏的做法？有没有更优雅的方式来做到这一点？ 再次感谢！

【讨论】：