使側邊欄 100% 的頁面高度

Question

我一直在使用類似博客的布局，一切進展順利，直到我決定實施一個非常簡單和極簡的用戶儀表板，該儀表板不會遵循與已經構建的整個布局完全相同的結構，因為它會有一個 (真實）側邊欄。

我已經從 Hugo 編譯給我的巨大 CSS 文件中盡可能多地提取出來（除了 Bootstrap 5，它是導入的）並用它制作了一個 Pen 。 它仍然很大，但我希望這不是問題

我僅在此 Pen（最后一個塊）中手動進行了一次修改，以顯示主體有一個彩色包裝，因為不知何故，它並沒有最終可見

因此，我的目的是使左側邊欄與整個頁面高度一起延伸，將頁腳定位在其上方，而不會丟失（此處描繪的）紅色框周圍的間距

但是我終生無法擺脫側邊欄和頁腳之間的底部間距。

更改<footer>底部屬性或添加負margin-top以將其拉起

我試過了，但這樣做會在頁腳下方增加一個間距

我已經搜索了解決方案，實際上我在這里找到了教程甚至其他問題，但沒有與我正在使用的 Bootstrap 5 一起使用

Answer 1

你可以給footer元素margin:0並給wrapper元素wrapper-box類並給這個類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>