我正在嘗試在 flexbox 選單中實作用戶滾動。當我將導航設定為 px 的高度（例如 100px）時，我意識到一些奇怪的事情，它會作業得很好，但是當我設定 100% 高度時，它會創建一個全域滾動，如果空間不足，我的選單不適合螢屏大小。我已經創建了兩個關于這個問題的代碼筆：
導航的 100% 高度（滾動不起作用）-
https://codepen.io/Shalev1104/pen/oNGYGgX
高度與 px（作業滾動）-
https://codepen.io/Shalev1104/pen/KKXNXdB
*它們之間的唯一區別是我的<nav>.
如果你不明白，我需要一個 100% 螢屏的垂直選單，在所有可用空間內都有一個垂直滾動。
很高興你的幫助
uj5u.com熱心網友回復：
百分比是相對測量值（如 100% 的......什么？）。確保導航上方的每個父元素也定義了高度。
例如，如果您的網站結構如下：
<html>
<body>
<ul class="nav">...</ul>
</body>
</html>
那么以下 CSS 可能會對您的問題進行排序：
html, body, ul.nav { height: 100%; }
編輯：這是一個更新和清理的版本（HTML 和 CSS）：
<html>
<body>
<ul class="nav sidebar">
<li class="nav-item sidebar-top">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search Chat" />
<button class="btn btn-secondary" type="button">Search</button>
</div>
</li>
<li class="nav-item sidebar-middle">
<nav>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
</nav>
</li>
<li class="nav-item sidebar-bottom">
<div class="d-flex justify-content-between align-items-center px-3">
<div>
<img src="https://www.jquery-az.com/html/images/banana.jpg" class="rounded-circle" width="50" height="50" alt="profile" />
<span class="ms-2">User 1</span>
</div>
<button class="btn bi-box-arrow-left"> Disconnect</button>
</div>
</li>
</ul>
<main>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>content on the page....</p>
<p>Test</p>
</main>
</body>
</html>
html, body {
margin: 0; padding: 0;
height: 100%;
}
body {
display: flex;
flex-flow: row nowrap;
width: 100%:
background-color: red;
}
main {
flex: 1 0 0;
overflow-y: scroll;
}
.sidebar {
margin: 0 20px 0 0; padding: 0;
list-style-type: none;
height: 100%;
display: flex;
flex-flow: column nowrap;
flex: 0 0 auto;
background-color: red;
}
.sidebar-top {
margin: 0; padding: 5px;
flex: 0 0 auto;
background-color: green;
}
.sidebar-middle {
margin: 0; padding: 5px;
flex: 1 1 auto;
overflow-y: scroll;
background-color: yellow;
}
.sidebar-middle nav {
}
.sidebar-middle nav > li {
}
.sidebar-bottom {
margin: 0; padding: 5px;
flex: 0 0 auto;
background-color: blue;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379686.html
標籤：css bootstrap-4
上一篇：CSS粘性屬性消失超過螢屏大小