使侧边栏成为页面高度的 100%
Making sidebar 100% of page height
我一直在使用类似博客的布局，一切都进行得很顺利，直到我决定实现一个非常简单和极简主义的用户仪表板，它不会遵循与已经构建的整个布局完全相同的结构它会有一个（真实的）侧边栏。
我已经从 Hugo 编译给我的巨大 CSS 文件中提取了尽可能多的内容（除了导入的 Bootstrap 5）并用它制作了 a Pen .还是很大，希望没问题
I've only made one modification, manually, in this Pen (last block) to show that there's a coloured wrapper for the main body because, somehow, it didn't end visible
因此，我的意图是让左侧边栏沿整个页面高度延伸，将页脚定位在其上方，而不丢失（此处描绘的）红框周围的间距
但我这辈子都无法摆脱侧边栏和页脚之间的底部间距。
Change the <footer> bottom property or add a negative margin-top to pull it up
我试过了，但这样做会在页脚下方增加一个间距
我搜索了解决方案，实际上我在这里找到了教程甚至其他问题，但没有 Bootstrap 5 我正在使用
您可以给 footer 元素 margin:0 并给 wrapper
element wrapper-box class 并给这个 class margin-bottom: -15px 负值。这样你的盒子就不会再出问题了。
您可以使用以下代码
更新您的CSS
a:hover {
color: inherit
}
#comments {
scrollbar-color: initial!important
}
#comments::-webkit-scrollbar {
width: initial
}
#comments::-webkit-scrollbar-track {
background: initial
}
#comments::-webkit-scrollbar-thumb {
background-color: initial
}
:root {
--darker-gray: 22, 22, 22;
--dark-gray: 31, 31, 31;
--mid-gray: 89, 89, 89;
--light-gray: 200, 200, 200;
--lighter-gray: 250, 250, 250;
--dark-d-red: 51, 2, 11;
--mid-d-red: 85, 0, 22;
--light-d-red: 166, 0, 41;
--dark-l-red: 99, 0, 0;
--mid-l-red: 115, 0, 5;
--light-l-red: 179, 0, 0;
--dark-purple: 51, 5, 51;
--mid-purple: 64, 5, 64;
--light-purple: 115, 11, 115;
--dark-blue: 18, 28, 50;
--mid-blue: 21, 35, 61;
--light-blue: 45, 68, 113;
--dark-d-green: 3, 33, 36;
--mid-d-green: 5, 43, 46;
--light-d-green: 0, 78, 85;
--dark-l-green: 3, 33, 0;
--mid-l-green: 5, 44, 0;
--light-l-green: 0, 78, 0;
--dark-brown: 36, 20, 19;
--mid-brown: 51, 23, 23;
--light-brown: 76, 42, 41;
--kuro: 26, 26, 26;
--shiro: 235, 235, 235;
--mid-white: 107, 107, 107;
--light-text: 165, 165, 165;
--danger: 220, 53, 69;
--warning: 255, 193, 7
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
}
html,
body {
font-family: quicksand, sans-serif;
font-size: 1.12rem
}
h1 {
font-family: zoinks;
font-size: 3rem;
font-weight: 700;
letter-spacing: -1px;
margin: .75rem 0 .25rem;
text-transform: uppercase
}
#page h1 {
font-family: quicksand, sans-serif;
font-size: 2rem;
font-weight: 700
}
h2 {
font-family: zoinks;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 0;
text-transform: uppercase
}
h2 a {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
width: 50vw;
white-space: nowrap
}
h3 {
font-size: 1.1rem;
margin-bottom: 0
}
h5>span {
font-weight: 700
}
h6 {
font-size: 1.3rem;
font-weight: 700;
-webkit-mask-image: url(/assets/images/ui/icons.svg#bubble);
mask-image: url(/assets/images/ui/icons.svg#bubble);
padding: 0 0 .3rem .15rem;
height: 5.5rem;
width: 5.5rem
}
h6+span {
font-size: 1.5rem;
font-weight: 700;
margin-left: 1rem;
position: relative;
top: -.2rem
}
#comments .editor a {
font-size: 1rem
}
#comments .editor a.toggle {
cursor: pointer;
font-weight: 700
}
footer {
font-size: .9rem
}
footer li:not(:last-child):after {
font-size: 1rem
}
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.icon.loading {
height: 200px;
width: 200px
}
.icon.search {
fill: rgba(var(--mid-gray));
height: 2.25rem;
width: 2.25rem
}
.icon.home,
.icon.preferences {
fill: rgba(var(--mid-white));
height: 2rem;
width: 2rem
}
.active .icon.home,
.active .icon.preferences {
fill: rgba(var(--shiro))
}
.icon.home {
transform: scale( .75)
}
.icon.preferences {
transform: scale( .6)
}
body {
margin-top: 4.5rem
}
body::-webkit-scrollbar {
width: auto
}
button[type=submit] {
font-weight: 700;
margin-bottom: 2rem;
padding: .5rem 1rem
}
article {
background-color: #fff;
border-radius: .5rem;
margin-top: 2.25rem;
padding: 2rem
}
article p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto
}
article .picture {
margin: 2rem 0
}
article figure {
margin: 0;
max-width: 80%;
position: relative
}
article figure figcaption {
bottom: 3rem;
position: absolute;
right: -4.25rem;
transform: rotate( -90deg)
}
article iframe,
article .embed img,
article figure img {
border: 2px solid rgba( var( --darker-gray));
height: 100%;
width: 100%
}
article .meta img {
border-radius: .5rem;
width: 5rem
}
nav.pagination {
margin: 1.5rem 0
}
nav.pagination div {
background-color: #fff;
border: 1px solid #fff;
border-radius: .5rem;
padding: 1rem
}
footer {
bottom: -1rem;
-webkit-box-shadow: 0 -4px 5px -2px #000;
box-shadow: 0 -4px 5px -2px #000;
margin: 0 ;
position: relative
}
footer a:hover {
text-decoration: underline
}
footer li:not(:last-child):after {
content: "●";
font-size: .65rem;
margin-left: .6rem;
vertical-align: 2px
}
.avatar img {
border-radius: .5rem;
height: 5rem;
width: 5rem
}
header.top {
background-color: rgba( var( --darker-gray));
-webkit-box-shadow: 0 4px 5px -2px #000;
box-shadow: 0 4px 5px -2px #000;
color: rgba( var( --light-text));
height: 4.6rem;
padding: 0 2.5rem;
position: fixed;
top: 0;
z-index: 999;
width: 100%
}
#search input {
background: 0 0;
border: none;
color: rgba( var( --mid-gray));
cursor: pointer;
display: inline-block;
font-size: 2rem;
height: 3.75rem;
left: 2.5rem;
outline: none;
position: absolute;
top: 0;
transition: width .5s, z-index .5s;
width: 0;
z-index: 3
}
#search svg {
cursor: pointer;
left: 0;
position: relative;
top: 4px;
transition: left .5s, top .5s
}
.wrapper-box{
margin-bottom: -15px;
}
#search .wrapper:hover input,
#search .wrapper:focus input,
#search .wrapper:focus-within input {
border-bottom: 1px solid rgba( var( --mid-gray));
cursor: text;
width: 24rem;
z-index: 1
}
#search .wrapper:hover svg,
#search .wrapper:focus svg,
#search .wrapper:focus-within svg {
left: 22rem;
top: -3px
}
#user {
background-color: rgba( var( --dark-gray));
cursor: pointer;
font-size: .75rem;
padding: 0 1rem
}
#user,
#user div {
width: 10.5rem
}
#user img {
width: 2rem
}
#user svg {
fill: rgba( var(--mid-gray));
margin: 0 -10px 0 5px
}
#user svg.user {
margin-top: -3px;
height: 14px;
width: 14px
}
#user svg.logout {
margin: 3px 0 0 7px;
height: 20px;
width: 20px
}
#user .info,
#user .icon.user+span {
margin-left: 1rem
}
.dropdown-menu {
border-top-right-radius: 0;
border-top-left-radius: 0;
color: rgba( var(--mid-gray));
margin: -3px 0 0 -1rem!important;
padding: 0;
width: 10.5rem
}
.dropdown-item:last-child:focus,
.dropdown-item:last-child:hover {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem
}
.dropdown-menu a {
color: #6c757d;
padding: .75rem
}
html.shiro,
.shiro body {
scrollbar-color: #c8c8c8 #fafafa!important
}
.shiro body::-webkit-scrollbar-track {
background: #fafafa
}
.shiro body::-webkit-scrollbar-thumb {
background-color: var#C8C8C8
}
.shiro body {
background-color: rgba( var(--shiro))
}
.shiro h1 {
color: rgba( var(--mid-white));
text-shadow: -2px -2px 0 rgba( 0, 0, 0), 2px -2px 0 rgba( 0, 0, 0), -2px 2px 0 rgba( 0, 0, 0), 2px 2px 0 rgba( 0, 0, 0)
}
.shiro #page h1 {
text-shadow: none
}
.shiro h2 {
color: rgba( var(--mid-white))
}
.shiro h3 {
color: rgba( var(--mid-gray))
}
.shiro h5>span {
color: rgba( var(--shiro))
}
.shiro h6 {
background: rgba( var(--mid-white));
color: #fff
}
.shiro h6+span {
color: rgba( var(--shiro))
}
.shiro #sidebar {
background-color: rgba( var(--lighter-gray))
}
.shiro #sidebar .nav-link,
.shiro #sidebar .nav-link.active,
.shiro #sidebar .nav-link:hover {
color: rgba( var(--dark-gray))
}
.shiro #sidebar .nav-link:hover svg,
.shiro #sidebar .nav-link.active svg {
fill: rgba( var(--darker-gray))
}
.shiro #login h2 {
color: rgba( var(--light-text))
}
.shiro #login input:focus {
border: 4px solid rgba( var(--kuro))
}
.shiro #comments .name {
color: rgba( var(--kuro))
}
.shiro #comments .markdown {
border: 1px solid #ccc
}
.shiro #comments .editor a.toggle:hover {
background-color: rgba( var(--darker-gray));
color: #fff
}
.shiro #comments .editor .icon.help {
fill: rgba( var(--mid-white))
}
.shiro #comments .comments .message a,
.shiro #comments .comments .author .display {
color: rgba( var(--kuro))
}
.shiro footer {
background-color: rgba( var( --darker-gray));
color: rgba( var(--light-text))
}
.shiro #comments .icon.loading {
fill: rgba( var(--darker-gray))
}
.shiro .icon.arrow-right,
.shiro .icon.arrow-left {
fill: rgba( var(--mid-gray))
}
.shiro .btn.btn-primary {
background-color: rgba( var(--mid-white));
border-color: rgba( var(--mid-white));
color: rgba( var(--shiro))
}
.shiro .danger {
background-color: rgba( var( --mid-white), 0.15)!important;
border-color: rgba( var( --mid-white))!important;
color: rgba( var( --mid-white))!important
}
.shiro article,
.shiro #comments,
.shiro nav.pagination div {
border: 1px solid rgba(var(--mid-white), 0.75)!important
}
.shiro h6+span {
color: rgba( var(--mid-white))!important
}
.shiro #comments p.disclaimer {
color: rgba( var(--kuro))!important
}
#dashboard {
margin-right: .8rem
}
#dashboard .row:first-child>.col {
margin-bottom: 2rem
}
#sidebar {
box-shadow: 0 0 5px -2px rgba(var(--darker-gray));
height: 100%;
left: -1.7rem;
padding: 1rem 1rem 0;
position: relative
}
#sidebar .nav-link {
color: rgba( var(--light-text))
}
#sidebar .nav-link:hover,
#sidebar .nav-link.active {
color: rgba( var(--shiro))
}
#sidebar .nav-link:hover svg {
fill: rgba( var(--shiro))
}
#panel {
background-color: #f00;
color: #fff;
border-radius: .5rem;
margin-top: 1.8rem;
padding: 2rem
}
并使用以下内容更新您的 HTML
<header class="top">
<div>
<div class="d-flex justify-content-between">
<div class="align-self-center" id="search">
<div class="wrapper">
<input placeholder="Search" type="text" />
<svg class="icon search button">
<path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"/>
</svg>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
<h1 class="text-center">Site Title</h1>
</div>
</div>
<div id="user">
<div class="d-inline-flex align-items-center h-100" data-bs-toggle="dropdown">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png"
class="rounded-circle" />
<div class="info">
<span class="name">Username</span>
<span>@username</span>
</div>
</div>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="/profile/user/brunoaugusto">
<svg class="icon user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
<path d="M23.797 20.922c-0.406-2.922-1.594-5.516-4.25-5.875-1.375 1.5-3.359 2.453-5.547 2.453s-4.172-0.953-5.547-2.453c-2.656 0.359-3.844 2.953-4.25 5.875 2.172 3.063 5.75 5.078 9.797 5.078s7.625-2.016 9.797-5.078zM20 10c0-3.313-2.688-6-6-6s-6 2.688-6 6 2.688 6 6 6 6-2.688 6-6zM28 14c0 7.703-6.25 14-14 14-7.734 0-14-6.281-14-14 0-7.734 6.266-14 14-14s14 6.266 14 14z" />
</svg>
<span>Profile</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:">
<svg class="icon logout">
<use xlink:href="/assets/images/ui/icons.svg#logout" />
</svg>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<wrapper class="d-flex container-fluid wrapper-box"><div class="row">
<main class="col"><section id="dashboard">
<div class="row gx-0">
<div class="col-2">
<div id="sidebar" class="d-flex">
<ul class="nav flex-column w-100">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<svg class="icon home">
<path d="M22 15.5v7.5c0 0.547-0.453 1-1 1h-6v-6h-4v6h-6c-0.547 0-1-0.453-1-1v-7.5c0-0.031 0.016-0.063 0.016-0.094l8.984-7.406 8.984 7.406c0.016 0.031 0.016 0.063 0.016 0.094zM25.484 14.422l-0.969 1.156c-0.078 0.094-0.203 0.156-0.328 0.172h-0.047c-0.125 0-0.234-0.031-0.328-0.109l-10.813-9.016-10.813 9.016c-0.109 0.078-0.234 0.125-0.375 0.109-0.125-0.016-0.25-0.078-0.328-0.172l-0.969-1.156c-0.172-0.203-0.141-0.531 0.063-0.703l11.234-9.359c0.656-0.547 1.719-0.547 2.375 0l3.813 3.187v-3.047c0-0.281 0.219-0.5 0.5-0.5h3c0.281 0 0.5 0.219 0.5 0.5v6.375l3.422 2.844c0.203 0.172 0.234 0.5 0.063 0.703z"/>
</svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link">
<svg class="icon preferences" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M11.366 22.564l1.291-1.807-1.414-1.414-1.807 1.291c-0.335-0.187-0.694-0.337-1.071-0.444l-0.365-2.19h-2l-0.365 2.19c-0.377 0.107-0.736 0.256-1.071 0.444l-1.807-1.291-1.414 1.414 1.291 1.807c-0.187 0.335-0.337 0.694-0.443 1.071l-2.19 0.365v2l2.19 0.365c0.107 0.377 0.256 0.736 0.444 1.071l-1.291 1.807 1.414 1.414 1.807-1.291c0.335 0.187 0.694 0.337 1.071 0.444l0.365 2.19h2l0.365-2.19c0.377-0.107 0.736-0.256 1.071-0.444l1.807 1.291 1.414-1.414-1.291-1.807c0.187-0.335 0.337-0.694 0.444-1.071l2.19-0.365v-2l-2.19-0.365c-0.107-0.377-0.256-0.736-0.444-1.071zM7 27c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM32 12v-2l-2.106-0.383c-0.039-0.251-0.088-0.499-0.148-0.743l1.799-1.159-0.765-1.848-2.092 0.452c-0.132-0.216-0.273-0.426-0.422-0.629l1.219-1.761-1.414-1.414-1.761 1.219c-0.203-0.149-0.413-0.29-0.629-0.422l0.452-2.092-1.848-0.765-1.159 1.799c-0.244-0.059-0.492-0.109-0.743-0.148l-0.383-2.106h-2l-0.383 2.106c-0.251 0.039-0.499 0.088-0.743 0.148l-1.159-1.799-1.848 0.765 0.452 2.092c-0.216 0.132-0.426 0.273-0.629 0.422l-1.761-1.219-1.414 1.414 1.219 1.761c-0.149 0.203-0.29 0.413-0.422 0.629l-2.092-0.452-0.765 1.848 1.799 1.159c-0.059 0.244-0.109 0.492-0.148 0.743l-2.106 0.383v2l2.106 0.383c0.039 0.251 0.088 0.499 0.148 0.743l-1.799 1.159 0.765 1.848 2.092-0.452c0.132 0.216 0.273 0.426 0.422 0.629l-1.219 1.761 1.414 1.414 1.761-1.219c0.203 0.149 0.413 0.29 0.629 0.422l-0.452 2.092 1.848 0.765 1.159-1.799c0.244 0.059 0.492 0.109 0.743 0.148l0.383 2.106h2l0.383-2.106c0.251-0.039 0.499-0.088 0.743-0.148l1.159 1.799 1.848-0.765-0.452-2.092c0.216-0.132 0.426-0.273 0.629-0.422l1.761 1.219 1.414-1.414-1.219-1.761c0.149-0.203 0.29-0.413 0.422-0.629l2.092 0.452 0.765-1.848-1.799-1.159c0.059-0.244 0.109-0.492 0.148-0.743l2.106-0.383zM21 15.35c-2.402 0-4.35-1.948-4.35-4.35s1.948-4.35 4.35-4.35 4.35 1.948 4.35 4.35c0 2.402-1.948 4.35-4.35 4.35z"/>
</svg>
Preferences
</a>
</li>
</ul>
</div>
</div>
<div class="col" id="panel">
<div >
Ullamco amet aute Lorem exercitation sunt commodo aliquip sit. Minim ea dolore exercitation tempor culpa consequat commodo deserunt sint ad veniam qui. Nisi est in duis nostrud id. Pariatur reprehenderit nisi consequat deserunt dolor laboris duis dolore consectetur id ea laboris pariatur. Irure eiusmod do aute reprehenderit amet.
Ut ipsum ullamco anim aliquip officia ex irure duis. Duis deserunt ut voluptate irure elit culpa ea non exercitation cillum fugiat est. Occaecat minim commodo adipisicing pariatur sint cillum laborum duis eu nostrud laboris magna do.
Ad sunt duis excepteur nisi ea sunt nulla. Ullamco quis qui reprehenderit duis enim elit ea duis velit consequat fugiat. Enim reprehenderit minim ea non. Magna pariatur dolore elit consequat voluptate esse incididunt aliqua ad pariatur nostrud. Sit ad Lorem commodo sint sunt ex.
Laboris dolor Lorem pariatur dolore. Irure fugiat qui ipsum ullamco consectetur. Est sint anim id magna cillum commodo incididunt proident id ad aliquip ipsum.
Deserunt dolor ea consequat non esse. Aliqua laboris velit nisi voluptate incididunt aliquip cupidatat aliquip mollit sit reprehenderit. Tempor ipsum ex cupidatat irure est. Duis duis cillum do velit nisi enim incididunt.
Excepteur quis ullamco dolor ut laboris deserunt ea mollit. Sunt amet nulla nostrud dolor dolor mollit anim amet ad amet. Culpa qui nostrud minim do consectetur laboris duis duis.
Ex proident aliquip id nostrud minim eiusmod excepteur reprehenderit mollit deserunt amet quis. Nisi culpa quis ullamco labore id sit velit non consequat. Non qui est nulla adipisicing consequat. Duis amet pariatur incididunt eu commodo consequat et aute.
Adipisicing elit incididunt proident amet ea do irure esse. Cupidatat anim nisi in mollit esse exercitation non ipsum excepteur. Mollit eiusmod fugiat fugiat ad eu mollit proident.
</div>
</div>
</div>
</section>
</main>
</div>
</wrapper>
<footer id="copyright" class="p-3">
<div class="row">
<div class="col d-flex align-items-center order-md-1">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="/terms" rel="nofollow">
Terms
</a>
</li>
<li class="list-inline-item">
<a href="/help" rel="nofollow">
Help
</a>
</li>
</ul>
</div>
<div class="col-md-6 d-flex justify-content-center align-items-center order-md-2 order-sm-3 mt-md-0 mt-sm-3">
Some rights reserved
</div>
<div class="col d-flex justify-content-end align-items-center order-md-3 order-sm-2">
</div>
</div>
</footer>
<div id="overlay"></div>
<div class="modal fade" id="login" tabindex="-1" aria-labelledby="login" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="container-fluid p-4 px-2">
<div class="row m-3">
<a href="/ajuda#login" target="_blank">
<svg class="icon help">
<use xlink:href="/assets/images/ui/icons.svg#help" />
</svg>
</a>
<div class="col d-flex justify-content-center">
<svg class="github">
<use xlink:href="/assets/images/ui/icons.svg#github" />
</svg>
</div>
</div>
<div class="row m-4">
<div class="col d-flex justify-content-center">
<h2>LOGIN</h2>
</div>
</div>
<div class="row m-3">
<div class="col form-floating">
<input type="username" class="form-control username">
<label for="username">Usuário</label>
</div>
</div>
<div class="row m-3">
<div class="col form-floating">
<input type="password" class="form-control token">
<label for="token">Token de Acesso</label>
</div>
</div>
<div class="row m-3">
<div class="col d-flex justify-content-center">
<button type="submit" class="btn btn-primary btn-lg">Login</button>
</div>
</div>
</div>
</div>
</div>
</div>
我一直在使用类似博客的布局，一切都进行得很顺利，直到我决定实现一个非常简单和极简主义的用户仪表板，它不会遵循与已经构建的整个布局完全相同的结构它会有一个（真实的）侧边栏。
我已经从 Hugo 编译给我的巨大 CSS 文件中提取了尽可能多的内容（除了导入的 Bootstrap 5）并用它制作了 a Pen .还是很大，希望没问题
I've only made one modification, manually, in this Pen (last block) to show that there's a coloured wrapper for the main body because, somehow, it didn't end visible
因此，我的意图是让左侧边栏沿整个页面高度延伸，将页脚定位在其上方，而不丢失（此处描绘的）红框周围的间距
但我这辈子都无法摆脱侧边栏和页脚之间的底部间距。
Change the
<footer>bottom property or add a negativemargin-topto pull it up
我试过了，但这样做会在页脚下方增加一个间距
我搜索了解决方案，实际上我在这里找到了教程甚至其他问题，但没有 Bootstrap 5 我正在使用
您可以给 footer 元素 margin:0 并给 wrapper
element wrapper-box class 并给这个 class margin-bottom: -15px 负值。这样你的盒子就不会再出问题了。
您可以使用以下代码
更新您的CSSa:hover {
color: inherit
}
#comments {
scrollbar-color: initial!important
}
#comments::-webkit-scrollbar {
width: initial
}
#comments::-webkit-scrollbar-track {
background: initial
}
#comments::-webkit-scrollbar-thumb {
background-color: initial
}
:root {
--darker-gray: 22, 22, 22;
--dark-gray: 31, 31, 31;
--mid-gray: 89, 89, 89;
--light-gray: 200, 200, 200;
--lighter-gray: 250, 250, 250;
--dark-d-red: 51, 2, 11;
--mid-d-red: 85, 0, 22;
--light-d-red: 166, 0, 41;
--dark-l-red: 99, 0, 0;
--mid-l-red: 115, 0, 5;
--light-l-red: 179, 0, 0;
--dark-purple: 51, 5, 51;
--mid-purple: 64, 5, 64;
--light-purple: 115, 11, 115;
--dark-blue: 18, 28, 50;
--mid-blue: 21, 35, 61;
--light-blue: 45, 68, 113;
--dark-d-green: 3, 33, 36;
--mid-d-green: 5, 43, 46;
--light-d-green: 0, 78, 85;
--dark-l-green: 3, 33, 0;
--mid-l-green: 5, 44, 0;
--light-l-green: 0, 78, 0;
--dark-brown: 36, 20, 19;
--mid-brown: 51, 23, 23;
--light-brown: 76, 42, 41;
--kuro: 26, 26, 26;
--shiro: 235, 235, 235;
--mid-white: 107, 107, 107;
--light-text: 165, 165, 165;
--danger: 220, 53, 69;
--warning: 255, 193, 7
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
}
html,
body {
font-family: quicksand, sans-serif;
font-size: 1.12rem
}
h1 {
font-family: zoinks;
font-size: 3rem;
font-weight: 700;
letter-spacing: -1px;
margin: .75rem 0 .25rem;
text-transform: uppercase
}
#page h1 {
font-family: quicksand, sans-serif;
font-size: 2rem;
font-weight: 700
}
h2 {
font-family: zoinks;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 0;
text-transform: uppercase
}
h2 a {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
width: 50vw;
white-space: nowrap
}
h3 {
font-size: 1.1rem;
margin-bottom: 0
}
h5>span {
font-weight: 700
}
h6 {
font-size: 1.3rem;
font-weight: 700;
-webkit-mask-image: url(/assets/images/ui/icons.svg#bubble);
mask-image: url(/assets/images/ui/icons.svg#bubble);
padding: 0 0 .3rem .15rem;
height: 5.5rem;
width: 5.5rem
}
h6+span {
font-size: 1.5rem;
font-weight: 700;
margin-left: 1rem;
position: relative;
top: -.2rem
}
#comments .editor a {
font-size: 1rem
}
#comments .editor a.toggle {
cursor: pointer;
font-weight: 700
}
footer {
font-size: .9rem
}
footer li:not(:last-child):after {
font-size: 1rem
}
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.icon.loading {
height: 200px;
width: 200px
}
.icon.search {
fill: rgba(var(--mid-gray));
height: 2.25rem;
width: 2.25rem
}
.icon.home,
.icon.preferences {
fill: rgba(var(--mid-white));
height: 2rem;
width: 2rem
}
.active .icon.home,
.active .icon.preferences {
fill: rgba(var(--shiro))
}
.icon.home {
transform: scale( .75)
}
.icon.preferences {
transform: scale( .6)
}
body {
margin-top: 4.5rem
}
body::-webkit-scrollbar {
width: auto
}
button[type=submit] {
font-weight: 700;
margin-bottom: 2rem;
padding: .5rem 1rem
}
article {
background-color: #fff;
border-radius: .5rem;
margin-top: 2.25rem;
padding: 2rem
}
article p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto
}
article .picture {
margin: 2rem 0
}
article figure {
margin: 0;
max-width: 80%;
position: relative
}
article figure figcaption {
bottom: 3rem;
position: absolute;
right: -4.25rem;
transform: rotate( -90deg)
}
article iframe,
article .embed img,
article figure img {
border: 2px solid rgba( var( --darker-gray));
height: 100%;
width: 100%
}
article .meta img {
border-radius: .5rem;
width: 5rem
}
nav.pagination {
margin: 1.5rem 0
}
nav.pagination div {
background-color: #fff;
border: 1px solid #fff;
border-radius: .5rem;
padding: 1rem
}
footer {
bottom: -1rem;
-webkit-box-shadow: 0 -4px 5px -2px #000;
box-shadow: 0 -4px 5px -2px #000;
margin: 0 ;
position: relative
}
footer a:hover {
text-decoration: underline
}
footer li:not(:last-child):after {
content: "●";
font-size: .65rem;
margin-left: .6rem;
vertical-align: 2px
}
.avatar img {
border-radius: .5rem;
height: 5rem;
width: 5rem
}
header.top {
background-color: rgba( var( --darker-gray));
-webkit-box-shadow: 0 4px 5px -2px #000;
box-shadow: 0 4px 5px -2px #000;
color: rgba( var( --light-text));
height: 4.6rem;
padding: 0 2.5rem;
position: fixed;
top: 0;
z-index: 999;
width: 100%
}
#search input {
background: 0 0;
border: none;
color: rgba( var( --mid-gray));
cursor: pointer;
display: inline-block;
font-size: 2rem;
height: 3.75rem;
left: 2.5rem;
outline: none;
position: absolute;
top: 0;
transition: width .5s, z-index .5s;
width: 0;
z-index: 3
}
#search svg {
cursor: pointer;
left: 0;
position: relative;
top: 4px;
transition: left .5s, top .5s
}
.wrapper-box{
margin-bottom: -15px;
}
#search .wrapper:hover input,
#search .wrapper:focus input,
#search .wrapper:focus-within input {
border-bottom: 1px solid rgba( var( --mid-gray));
cursor: text;
width: 24rem;
z-index: 1
}
#search .wrapper:hover svg,
#search .wrapper:focus svg,
#search .wrapper:focus-within svg {
left: 22rem;
top: -3px
}
#user {
background-color: rgba( var( --dark-gray));
cursor: pointer;
font-size: .75rem;
padding: 0 1rem
}
#user,
#user div {
width: 10.5rem
}
#user img {
width: 2rem
}
#user svg {
fill: rgba( var(--mid-gray));
margin: 0 -10px 0 5px
}
#user svg.user {
margin-top: -3px;
height: 14px;
width: 14px
}
#user svg.logout {
margin: 3px 0 0 7px;
height: 20px;
width: 20px
}
#user .info,
#user .icon.user+span {
margin-left: 1rem
}
.dropdown-menu {
border-top-right-radius: 0;
border-top-left-radius: 0;
color: rgba( var(--mid-gray));
margin: -3px 0 0 -1rem!important;
padding: 0;
width: 10.5rem
}
.dropdown-item:last-child:focus,
.dropdown-item:last-child:hover {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem
}
.dropdown-menu a {
color: #6c757d;
padding: .75rem
}
html.shiro,
.shiro body {
scrollbar-color: #c8c8c8 #fafafa!important
}
.shiro body::-webkit-scrollbar-track {
background: #fafafa
}
.shiro body::-webkit-scrollbar-thumb {
background-color: var#C8C8C8
}
.shiro body {
background-color: rgba( var(--shiro))
}
.shiro h1 {
color: rgba( var(--mid-white));
text-shadow: -2px -2px 0 rgba( 0, 0, 0), 2px -2px 0 rgba( 0, 0, 0), -2px 2px 0 rgba( 0, 0, 0), 2px 2px 0 rgba( 0, 0, 0)
}
.shiro #page h1 {
text-shadow: none
}
.shiro h2 {
color: rgba( var(--mid-white))
}
.shiro h3 {
color: rgba( var(--mid-gray))
}
.shiro h5>span {
color: rgba( var(--shiro))
}
.shiro h6 {
background: rgba( var(--mid-white));
color: #fff
}
.shiro h6+span {
color: rgba( var(--shiro))
}
.shiro #sidebar {
background-color: rgba( var(--lighter-gray))
}
.shiro #sidebar .nav-link,
.shiro #sidebar .nav-link.active,
.shiro #sidebar .nav-link:hover {
color: rgba( var(--dark-gray))
}
.shiro #sidebar .nav-link:hover svg,
.shiro #sidebar .nav-link.active svg {
fill: rgba( var(--darker-gray))
}
.shiro #login h2 {
color: rgba( var(--light-text))
}
.shiro #login input:focus {
border: 4px solid rgba( var(--kuro))
}
.shiro #comments .name {
color: rgba( var(--kuro))
}
.shiro #comments .markdown {
border: 1px solid #ccc
}
.shiro #comments .editor a.toggle:hover {
background-color: rgba( var(--darker-gray));
color: #fff
}
.shiro #comments .editor .icon.help {
fill: rgba( var(--mid-white))
}
.shiro #comments .comments .message a,
.shiro #comments .comments .author .display {
color: rgba( var(--kuro))
}
.shiro footer {
background-color: rgba( var( --darker-gray));
color: rgba( var(--light-text))
}
.shiro #comments .icon.loading {
fill: rgba( var(--darker-gray))
}
.shiro .icon.arrow-right,
.shiro .icon.arrow-left {
fill: rgba( var(--mid-gray))
}
.shiro .btn.btn-primary {
background-color: rgba( var(--mid-white));
border-color: rgba( var(--mid-white));
color: rgba( var(--shiro))
}
.shiro .danger {
background-color: rgba( var( --mid-white), 0.15)!important;
border-color: rgba( var( --mid-white))!important;
color: rgba( var( --mid-white))!important
}
.shiro article,
.shiro #comments,
.shiro nav.pagination div {
border: 1px solid rgba(var(--mid-white), 0.75)!important
}
.shiro h6+span {
color: rgba( var(--mid-white))!important
}
.shiro #comments p.disclaimer {
color: rgba( var(--kuro))!important
}
#dashboard {
margin-right: .8rem
}
#dashboard .row:first-child>.col {
margin-bottom: 2rem
}
#sidebar {
box-shadow: 0 0 5px -2px rgba(var(--darker-gray));
height: 100%;
left: -1.7rem;
padding: 1rem 1rem 0;
position: relative
}
#sidebar .nav-link {
color: rgba( var(--light-text))
}
#sidebar .nav-link:hover,
#sidebar .nav-link.active {
color: rgba( var(--shiro))
}
#sidebar .nav-link:hover svg {
fill: rgba( var(--shiro))
}
#panel {
background-color: #f00;
color: #fff;
border-radius: .5rem;
margin-top: 1.8rem;
padding: 2rem
}
并使用以下内容更新您的 HTML
<header class="top">
<div>
<div class="d-flex justify-content-between">
<div class="align-self-center" id="search">
<div class="wrapper">
<input placeholder="Search" type="text" />
<svg class="icon search button">
<path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"/>
</svg>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
<h1 class="text-center">Site Title</h1>
</div>
</div>
<div id="user">
<div class="d-inline-flex align-items-center h-100" data-bs-toggle="dropdown">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png"
class="rounded-circle" />
<div class="info">
<span class="name">Username</span>
<span>@username</span>
</div>
</div>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="/profile/user/brunoaugusto">
<svg class="icon user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
<path d="M23.797 20.922c-0.406-2.922-1.594-5.516-4.25-5.875-1.375 1.5-3.359 2.453-5.547 2.453s-4.172-0.953-5.547-2.453c-2.656 0.359-3.844 2.953-4.25 5.875 2.172 3.063 5.75 5.078 9.797 5.078s7.625-2.016 9.797-5.078zM20 10c0-3.313-2.688-6-6-6s-6 2.688-6 6 2.688 6 6 6 6-2.688 6-6zM28 14c0 7.703-6.25 14-14 14-7.734 0-14-6.281-14-14 0-7.734 6.266-14 14-14s14 6.266 14 14z" />
</svg>
<span>Profile</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:">
<svg class="icon logout">
<use xlink:href="/assets/images/ui/icons.svg#logout" />
</svg>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<wrapper class="d-flex container-fluid wrapper-box"><div class="row">
<main class="col"><section id="dashboard">
<div class="row gx-0">
<div class="col-2">
<div id="sidebar" class="d-flex">
<ul class="nav flex-column w-100">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<svg class="icon home">
<path d="M22 15.5v7.5c0 0.547-0.453 1-1 1h-6v-6h-4v6h-6c-0.547 0-1-0.453-1-1v-7.5c0-0.031 0.016-0.063 0.016-0.094l8.984-7.406 8.984 7.406c0.016 0.031 0.016 0.063 0.016 0.094zM25.484 14.422l-0.969 1.156c-0.078 0.094-0.203 0.156-0.328 0.172h-0.047c-0.125 0-0.234-0.031-0.328-0.109l-10.813-9.016-10.813 9.016c-0.109 0.078-0.234 0.125-0.375 0.109-0.125-0.016-0.25-0.078-0.328-0.172l-0.969-1.156c-0.172-0.203-0.141-0.531 0.063-0.703l11.234-9.359c0.656-0.547 1.719-0.547 2.375 0l3.813 3.187v-3.047c0-0.281 0.219-0.5 0.5-0.5h3c0.281 0 0.5 0.219 0.5 0.5v6.375l3.422 2.844c0.203 0.172 0.234 0.5 0.063 0.703z"/>
</svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link">
<svg class="icon preferences" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M11.366 22.564l1.291-1.807-1.414-1.414-1.807 1.291c-0.335-0.187-0.694-0.337-1.071-0.444l-0.365-2.19h-2l-0.365 2.19c-0.377 0.107-0.736 0.256-1.071 0.444l-1.807-1.291-1.414 1.414 1.291 1.807c-0.187 0.335-0.337 0.694-0.443 1.071l-2.19 0.365v2l2.19 0.365c0.107 0.377 0.256 0.736 0.444 1.071l-1.291 1.807 1.414 1.414 1.807-1.291c0.335 0.187 0.694 0.337 1.071 0.444l0.365 2.19h2l0.365-2.19c0.377-0.107 0.736-0.256 1.071-0.444l1.807 1.291 1.414-1.414-1.291-1.807c0.187-0.335 0.337-0.694 0.444-1.071l2.19-0.365v-2l-2.19-0.365c-0.107-0.377-0.256-0.736-0.444-1.071zM7 27c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM32 12v-2l-2.106-0.383c-0.039-0.251-0.088-0.499-0.148-0.743l1.799-1.159-0.765-1.848-2.092 0.452c-0.132-0.216-0.273-0.426-0.422-0.629l1.219-1.761-1.414-1.414-1.761 1.219c-0.203-0.149-0.413-0.29-0.629-0.422l0.452-2.092-1.848-0.765-1.159 1.799c-0.244-0.059-0.492-0.109-0.743-0.148l-0.383-2.106h-2l-0.383 2.106c-0.251 0.039-0.499 0.088-0.743 0.148l-1.159-1.799-1.848 0.765 0.452 2.092c-0.216 0.132-0.426 0.273-0.629 0.422l-1.761-1.219-1.414 1.414 1.219 1.761c-0.149 0.203-0.29 0.413-0.422 0.629l-2.092-0.452-0.765 1.848 1.799 1.159c-0.059 0.244-0.109 0.492-0.148 0.743l-2.106 0.383v2l2.106 0.383c0.039 0.251 0.088 0.499 0.148 0.743l-1.799 1.159 0.765 1.848 2.092-0.452c0.132 0.216 0.273 0.426 0.422 0.629l-1.219 1.761 1.414 1.414 1.761-1.219c0.203 0.149 0.413 0.29 0.629 0.422l-0.452 2.092 1.848 0.765 1.159-1.799c0.244 0.059 0.492 0.109 0.743 0.148l0.383 2.106h2l0.383-2.106c0.251-0.039 0.499-0.088 0.743-0.148l1.159 1.799 1.848-0.765-0.452-2.092c0.216-0.132 0.426-0.273 0.629-0.422l1.761 1.219 1.414-1.414-1.219-1.761c0.149-0.203 0.29-0.413 0.422-0.629l2.092 0.452 0.765-1.848-1.799-1.159c0.059-0.244 0.109-0.492 0.148-0.743l2.106-0.383zM21 15.35c-2.402 0-4.35-1.948-4.35-4.35s1.948-4.35 4.35-4.35 4.35 1.948 4.35 4.35c0 2.402-1.948 4.35-4.35 4.35z"/>
</svg>
Preferences
</a>
</li>
</ul>
</div>
</div>
<div class="col" id="panel">
<div >
Ullamco amet aute Lorem exercitation sunt commodo aliquip sit. Minim ea dolore exercitation tempor culpa consequat commodo deserunt sint ad veniam qui. Nisi est in duis nostrud id. Pariatur reprehenderit nisi consequat deserunt dolor laboris duis dolore consectetur id ea laboris pariatur. Irure eiusmod do aute reprehenderit amet.
Ut ipsum ullamco anim aliquip officia ex irure duis. Duis deserunt ut voluptate irure elit culpa ea non exercitation cillum fugiat est. Occaecat minim commodo adipisicing pariatur sint cillum laborum duis eu nostrud laboris magna do.
Ad sunt duis excepteur nisi ea sunt nulla. Ullamco quis qui reprehenderit duis enim elit ea duis velit consequat fugiat. Enim reprehenderit minim ea non. Magna pariatur dolore elit consequat voluptate esse incididunt aliqua ad pariatur nostrud. Sit ad Lorem commodo sint sunt ex.
Laboris dolor Lorem pariatur dolore. Irure fugiat qui ipsum ullamco consectetur. Est sint anim id magna cillum commodo incididunt proident id ad aliquip ipsum.
Deserunt dolor ea consequat non esse. Aliqua laboris velit nisi voluptate incididunt aliquip cupidatat aliquip mollit sit reprehenderit. Tempor ipsum ex cupidatat irure est. Duis duis cillum do velit nisi enim incididunt.
Excepteur quis ullamco dolor ut laboris deserunt ea mollit. Sunt amet nulla nostrud dolor dolor mollit anim amet ad amet. Culpa qui nostrud minim do consectetur laboris duis duis.
Ex proident aliquip id nostrud minim eiusmod excepteur reprehenderit mollit deserunt amet quis. Nisi culpa quis ullamco labore id sit velit non consequat. Non qui est nulla adipisicing consequat. Duis amet pariatur incididunt eu commodo consequat et aute.
Adipisicing elit incididunt proident amet ea do irure esse. Cupidatat anim nisi in mollit esse exercitation non ipsum excepteur. Mollit eiusmod fugiat fugiat ad eu mollit proident.
</div>
</div>
</div>
</section>
</main>
</div>
</wrapper>
<footer id="copyright" class="p-3">
<div class="row">
<div class="col d-flex align-items-center order-md-1">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="/terms" rel="nofollow">
Terms
</a>
</li>
<li class="list-inline-item">
<a href="/help" rel="nofollow">
Help
</a>
</li>
</ul>
</div>
<div class="col-md-6 d-flex justify-content-center align-items-center order-md-2 order-sm-3 mt-md-0 mt-sm-3">
Some rights reserved
</div>
<div class="col d-flex justify-content-end align-items-center order-md-3 order-sm-2">
</div>
</div>
</footer>
<div id="overlay"></div>
<div class="modal fade" id="login" tabindex="-1" aria-labelledby="login" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="container-fluid p-4 px-2">
<div class="row m-3">
<a href="/ajuda#login" target="_blank">
<svg class="icon help">
<use xlink:href="/assets/images/ui/icons.svg#help" />
</svg>
</a>
<div class="col d-flex justify-content-center">
<svg class="github">
<use xlink:href="/assets/images/ui/icons.svg#github" />
</svg>
</div>
</div>
<div class="row m-4">
<div class="col d-flex justify-content-center">
<h2>LOGIN</h2>
</div>
</div>
<div class="row m-3">
<div class="col form-floating">
<input type="username" class="form-control username">
<label for="username">Usuário</label>
</div>
</div>
<div class="row m-3">
<div class="col form-floating">
<input type="password" class="form-control token">
<label for="token">Token de Acesso</label>
</div>
</div>
<div class="row m-3">
<div class="col d-flex justify-content-center">
<button type="submit" class="btn btn-primary btn-lg">Login</button>
</div>
</div>
</div>
</div>
</div>
</div>