我已经完成了一个自举项目，并且导航栏高度在屏幕宽度上保持一致：非常棒。
这是一个新项目，我无法弄清楚如何自己动手。我只使用bootstrap中的网格系统 - 没有别的。
当我使用chrome检查器工具更改屏幕宽度时，需要固定的导航栏高度。我很难实现的东西 - 即使是在一个只有index.html和style.css的不同的清洁文件中。
我在这个项目中首先使用移动设备，所以不要伤害你的眼睛我使用的视口是320px。*
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
}
P.S。我还使用复选框hack在较小的屏幕上切换导航栏。 我无法像我想的那样真正地扩展网站，但是呃，我稍后会进行探索。 提前谢谢：）
答案 0 :(得分：0)
如果您希望导航的高度保持一致，则需要为其赋予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*/
}
如果这不是您所需要的，请再解释一下;）
答案 1 :(得分：0)
我在我的项目中使用了以下代码：
如果你想给出高度你可以把它作为你想要的静态。
我也使用了clearfix属性来解决父容器高度折叠问题。
希望它对你有所帮助。
$scope.verify=function(){
var result=$scope.banners.filter(function(banner){
return banner.public;
});
return result.length!=0;
};
.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;
}
答案 2 :(得分：0)
好的，经过一些小试验后我找到了解决方案：
我插入了head标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
这是我在之前的项目中所做的，它改变了窗户和镀铬检查员的宽度，使高度保持固定！
你们对此有何评论？ 练习的好坏？有更优雅的方式吗？ 再次感谢！