可以通过在<aside>中使用position: fixed;来实现。
请查看此示例 jsfiddle
试试这个：
aside
{
position: fixed;
width: 200px;
height: 100%;
top: 0;
left: 0;
border: 1px solid #111;
}
我使用jQuery方法，因为使用fixed或absolute通常会破坏我的网格布局。在下面的示例中，当宽度小于990像素时，我的网格会崩溃，因此您需要更改此设置，假设您正在进行响应式设计。
$(window).resize(function() {
var doc_height = $(document).height();
var doc_width = $(document).width()
if (doc_width > 990) {
$('#sidebar').css("height", doc_height);
} else {
$('#sidebar').css("height", 'auto');
}
});
虽然这可能不是最有效的方法，但您并不需要设置变量。我发现它有助于提高可读性。
此致敬礼， M
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
p {
font-size: 1.125rem;
}
label {
display: flex;
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
HTML code start here
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/adminhome.css">
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
<link href="https://allfont.net/allfont.css?fonts=montserrat-bold" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<title>home</title>
</head>
<body>
<header>
<div class="tpe">
<p>Admin</p>
</div>
<div class="headbar">
<a href="adminallusers.html" class="allusers">
<i class="fas fa-users"></i>
<span class="users">All Users</span>
</a>
<a href="#" class="admin">
<i class="fas fa-user"></i>
<span class="user">Admin</span>
</a>
</div>
</header>
<nav>
<ul>
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-item">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-ticket-alt"></i>
<span class="nav-item">Tickets</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-upload"></i>
<span class="nav-item">Upload</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-tasks"></i>
<span class="nav-item">Status</span>
</a>
</li>
<li>
<a href="#" class="logout">
<i class="fas fa-sign-out-alt"></i>
<span class="nav-item">Log out</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
HTML end here
CSS start from here
@import url('https://allfont.net/allfont.css?fonts=montserrat-bold');
*{
margin: 0;
padding:0;
outline: none;
border: none;
text-decoration: none;
box-sizing: border-box;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
body{
background-color: white;
}
header{
position: fixed;
background:#404258;
height: 45px;
width: 100%;
overflow: hidden;
transition: width 0.2s linear;
}
header .tpe p{
font-size: 28px;
font-weight:900;
float: left;
color:white;
text-transform: uppercase;
margin-left:130px;
}
header a{
position: relative;
color: white;
font-size: 15px;
font-weight: 600;
display: table;
width: 300px;
padding: 10px;
}
header:hover{
background-color: none;
}
.admin{
padding:1px;
background:none;
text-decoration: none;
float: right;
margin-top:0px;
width:10%;
margin-right:-10px;
font-size: 15px;
font-weight:550;
color: white;
}
.allusers{
padding:1px;
background:none;
text-decoration: none;
float: right;
width:20%;
margin-top:0px;
margin-right:-100px;
font-size: 15px;
font-weight:550;
color: white;
}
.user{
position:relative;
top:10px;
margin-right:-50px;
width: 250px;
}
.users{
position:relative;
top:10px;
margin-right:auto;
width: 250px;
}
nav{
position: fixed;
top:45px;
bottom:-60px;
height: 100%;
left: 0;
background:#404258;
width: 90px;
overflow: hidden;
transition: width 0.2s linear;
}
nav a{
position: relative;
color: white;
font-size: 14px;
font-weight:600;
display: table;
width: 300px;
padding: 10px;
}
.fas{
position: relative;
width: 70px;
height: 40px;
top: 14px;
font-size: 20px;
text-align: center;
}
.nav-item{
position:relative;
top:12px;
margin-left:10px;
}
nav a:hover{
background: #A6ADC2;
}
nav:hover{
width: 200px;
transition: all 0.5s ease;
}
.logout{
position: absolute;
bottom: -20;
}
CSS end here
aside元素不支持 IE7 和 IE8。 - Guffa