CSS Bootstrap 导航栏中使用 100% 高度
在本文中，我们将介绍如何在CSS中使用Bootstrap框架创建一个带有导航栏且高度为100%的页面布局。
阅读更多：CSS 教程
1. 使用Bootstrap设置导航栏
首先，我们需要引入Bootstrap框架。可以在HTML文件的<head>标签中添加以下代码来引入Bootstrap样式文件和JavaScript文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
接下来，我们可以使用Bootstrap提供的导航栏组件来创建导航栏。在HTML文件中，添加以下代码来创建一个基本的导航栏：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
以上代码将创建一个黑色背景的导航栏，包含一个Logo和三个导航链接：Home、About和Contact。
2. 使用CSS设置高度为100%
为了使导航栏的高度达到100%，我们可以使用CSS来设置导航栏和页面的容器的高度。在CSS文件中，添加以下代码：
html,
body {
height: 100%;
}
.container-fluid {
min-height: 100%;
}
以上CSS代码将使整个页面的高度为100%。html和body元素的高度设置为100%，以确保整个页面的高度铺满整个视口。而container-fluid类将设置为最小高度100%，以使页面的容器铺满剩余的空间。
在此之后，您将看到导航栏高度已经为100%，并且页面容器随着内容的增加而自动延伸。
3. 添加内容和样式
现在我们可以开始向页面中添加更多内容了。可以在页面容器中任意位置添加所需的HTML元素。例如，我们可以在页面容器的下方添加一个主要内容区域。
<div class="container-fluid">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique orci nec nisl ultricies convallis. Donec aliquam venenatis laoreet. Sed consequat, leo in auctor hendrerit, turpis odio accumsan risus, ut vestibulum diam lacus in risus. Fusce accumsan sapien leo, ut consequat diam vulputate eu.</p>
</div>
以上代码将在页面容器中添加一个标题和一段文本。您可以根据需要自由添加、修改和样式化此内容。
4. 完整示例代码
下面是一个完整的示例代码，展示了如何创建一个具有100%高度的导航栏以及在页面容器中添加其他内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Navbar 100% Height</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique orci nec nisl ultricies convallis. Donec aliquam venenatis laoreet. Sed consequat, leo in auctor hendrerit, turpis odio accumsan risus, ut vestibulum diam lacus in risus. Fusce accumsan sapien leo, ut consequat diam vulputate eu.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
将以上代码复制到一个HTML文件中，并在浏览器中打开该文件，您将看到一个具有100%高度的导航栏和主要内容区域的页面。
总结
在本文中，我们介绍了如何在CSS中使用Bootstrap框架创建一个带有导航栏且高度为100%的页面布局。通过设置html和body元素的高度为100%，以及使用container-fluid类设置页面容器的最小高度为100%，我们可以轻松地实现一个自适应的、高度铺满的导航栏布局。通过添加其他内容和样式，可以自由定制页面的外观和功能。希望本文对您有所帮助！
此处评论已关闭