11
Có một không gian bí ẩn (khoảng 25px) giữa thanh điều hướng và div nội dung. Tôi đang sử dụng độ phân giải màn hình của Chrome và 1600x900. Tôi đã xem xét các câu hỏi khác với cùng một vấn đề, và tôi đã áp dụng các câu trả lời được đưa ra, nhưng vấn đề vẫn tồn tại. Tôi đã đặt lề dưới của thanh điều hướng thành 0 và ghi đè Bootstrap 3.1.1. HTMLKhông gian bên dưới navbar-fixed-top Bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/hover.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a href="#"><img src="img/title.png"></img></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="content"></div>
</body>
</html>
CSS
body {
padding: 70px 0 0 0;
}
html, body{
height: 100%;
}
/* Top Navigation Bar */
.navbar-fixed-top {
background: #F7F7F7;
min-height: 0;
height: 45px;
padding: 5px 0;
margin-bottom: 0;
}
.navbar-header{
height: 35px;
padding: 5px 0;
}
.content{
width: 100%;
height: 450px;
background: rgb(255, 240, 240);
}
Hey mà làm việc, hmm, làm thế nào mặc dù? Đó là padding nên ảnh hưởng đến đầu của cơ thể? Tôi bối rối. Mã bit đó thực sự làm gì đối với 'cơ thể'? – Elton
Aah có cùng chiều cao với thanh điều hướng. Giờ thì tôi đã hiểu. – Elton