页面高度的导航栏百分比答案

【问题标题】：Navbar % of Page Height页面高度的导航栏百分比
【发布时间】：2017-09-21 13:13:47
【问题描述】：

我想要的只是我的导航栏占页面高度 5% 的百分比，至少为 128 像素，这样我的徽标将始终至少为 128 像素或更大。

问题在于，这只是填充页面并且似乎使用了徽标大小。

代码：

.navbar {
  background-color: #1b1b1b;
}

.navbar>.container-fluid
.navbar>.container-fluid>.navbar-header,
.navbar>.container-fluid>.navbar-header>.navbar-brand{
  height: inherit;
}

.navbar>.container-fluid {
  margin-left:  18%;
  margin-right: 18%;
  padding-left: 0;
  padding-right: 0;
}

.navbar-brand>img {
  height: 100%;
  width: auto;
}

.navbar-default .navbar-nav>li>a{
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <title>OG Visuals</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </head>
  <body>
    
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="index.php"><img src="http://img.freepik.com/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg" alt="Logo" /></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

【问题讨论】：

我在设置 html, body {height:100%;} 后看到了这个工作，但你确定这是你想要的吗？ 5% 的高度在横向桌面上与纵向平板电脑或手机在视觉上有所不同。

标签： html css twitter-bootstrap navbar

【解决方案1】：

将height: 5vh; min-height: 128px; 给navbar-header，height: 100% 给container-fluid 和height: inherit 给navbar-header 和navbar-brand

.navbar {
  background-color: #1b1b1b;
}

.navbar>.container-fluid>.navbar-header, .navbar>.container-fluid>.navbar-header>.navbar-brand{
  height: inherit;
 } 

.navbar>.container-fluid {
  margin-left:  18%;
  margin-right: 18%;
  padding-left: 0;
  padding-right: 0;
  height: 100%;
}

.navbar-brand>img {
  height: 100%;
  width: auto;
}

.navbar.navbar-default {
   height: 5vh;
   min-height: 128px; 
}

.navbar-default .navbar-nav>li>a{
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <title>OG Visuals</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </head>
  <body>
    
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="index.php"><img src="http://img.freepik.com/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg" alt="Logo" /></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

【讨论】：

【解决方案2】：

如果您检查元素（分别为div.navbar-brand 和img），您将首先看到：.navbar-brand 具有height: inherit;，这意味着它将继承。所以解决这个问题的许多方法之一是给.navbar-brand一个height: 128px;

【讨论】：

尝试使用height: 5vh; min-height: 128px