我有簡單的導航欄和在 Bootstrap 5 中制作的內容。問題是我想使用vh-100并將它放在內容中，但是由于導航欄的大小，內容在下方，因為導航欄正在推動它。我想讓它保持在視圖頁面上而不需要滾動條，當我縮放時，我希望始終能夠看到導航欄和內容。
這是我到目前為止所做的：
uj5u.com熱心網友回復：
flex 實用程式、視口大小和溢位的組合似乎有效。請注意，我已將您的頁腳移到內容元素之外。它是標題和內容元素的兄弟。
.bg-darkblue {
background-color: darkblue;
}<head>
<link rel="stylesheet" type="text/css" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-dark p-0 bg-darkblue">
<div class="container-fluid">
<a class="navbar-brand text-light" href="/">Test</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> </ul>
</div>
</div>
</nav>
<div class="flex-fill overflow-auto">
<div class="card rounded-0">
<div id="test" class="card-body p-0 d-flex flex-column-reverse">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor
sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum
ipsum vero saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero
saepe accusamus magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus
magnam nemo consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo
consectetur voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum ipsum vero saepe accusamus magnam nemo consectetur
voluptas quidem similique mollitia repudiandae quam voluptatibus, maiores hic! Rerum unde consequatur a aliquid.
</div>
</div>
</div>
<div class="card-footer text-muted">
<form id="test-form" class="m-0">
<div class="row">
<div class="col">
<input type="text" class="form-control rounded-pill" autocomplete="off" placeholder="Type something...">
</div>
</div>
</form>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429635.html