0
私はブートストラッププロジェクトを実行しました。そして、navbarの高さは画面幅全体で一貫していました。これは素晴らしいものでした。異なる画面幅に渡って固定されたナビバーの高さ
これは新しいプロジェクトです。私はそれを自分で行う方法を理解できません。私はブートストラップからグリッドシステムだけを使用しています。
クロムインスペクタツールを使用して画面の幅を変更すると、ナビバーの高さが固定されている必要があります。私は、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
}
PSまた、小さな画面でナビゲーションバーを切り替えるためにチェックボックスのハックを使用しています。 私が望んでいたように、サイトを実際にスケールアップすることはできませんが、後でそれを検討します。 おかげで事前に:)
私は混乱しています。私は固定された左側のナビゲーションバーを見る。トップバーを期待していた。左のナビゲーションバーを固定した高さにしますか？ – Will
問題はなんですか？現在の状態と希望する状態を記述してください –
こんにちは、問題は私がクロムインスペクタツールを使用すると、navbarが応答します。私は、クロム・インスペクタを使用してウィンドウの幅を変更すると、固定された高さに留まることを望みます。私はまだクリーンなファイルで実験していますが、成功しません。 – Defaceo