在固定導航欄和頁腳之間獲取具有回應高度的側邊欄-有解無憂

我需要幫助創建一個基于側邊內容的可變高度的側邊欄。我的頁面分為三個部分：

一個固定navbar在頂部，
一個main區域
頁面底部的頁腳（非粘性）。

在該main區域中，我想創建一個位于navbar和之間的側邊欄footer。

這是我的嘗試之一

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: grey;
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 99;
}

.main {
  padding-top: 50px;
  min-height: calc(100vh - 150px);
}

.footer {
  background-color: blue;
  position: relative;
  bottom: 0;
  width: 100%;
  height: 100px;
}

.sidebar {
  height: 100%;
  width: 10%;
  position: absolute;
  z-index: 1;
  left: 0;
  background-color: orange;
  overflow-x: hidden;
}

.content {
  margin-left: 10%;
}

<div class="navbar">
  Navbar
</div>
<div class="main">
  <div class="sidebar">
    Sidebar
  </div>
  <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim,
   ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim
   sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus
   arcu. Mauris in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit
   amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt
   elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies.
   Vestibulum sed lectus nisi.

   Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor
   sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id
   ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus augue, iaculis 
   quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non 
   ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum et malesuada 
   fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar 
   sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non 
   pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in neque. Cras 
   lobortis vel ipsum a fringilla.
  </div>
</div>
<div class="footer">
</div>

不幸的是，側邊欄沒有到達頁腳。如果我使用position: "absolute";它覆寫頁腳。我也嘗試過將兩個div并排使用flex，但沒有成功。

如何獲得一個適應主要內容（介于navbar和之間footer）的側邊欄，確保main具有最小高度100vh - 150px以將頁腳保持在頁面底部？

任何幫助是極大的贊賞

uj5u.com熱心網友回復：

在不改變你的標記的情況下，你可以使用 Flexbox 來獲得你想要的布局：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.navbar {
  background-color: grey;
  flex-basis: 50px;
  padding: 5px;
}

.footer {
  background-color: blue;
  flex-basis: 100px;
  padding: 5px;
}

.main {
  flex-grow: 1;
  display: flex;
}

.sidebar {
  flex-basis: 10%;
  background-color: orange;
  padding: 5px;
}

.content {
  padding: 5px;
}

<div class="navbar">
  Navbar
</div>
<div class="main">
  <div class="sidebar">
    Sidebar
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
    in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
    lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
    augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
    et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
    neque. Cras lobortis vel ipsum a fringilla.
  </div>
</div>
<div class="footer">
  Footer
</div>

CSS 靈活的盒子布局 - CSS：層疊樣式表 | MDN
Flexbox 完整指南 | CSS 技巧

如果你愿意改變你的標記，或者display:contents在你的main元素上使用，你可以使用 Grid 布局。

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-columns: 10% 1fr;
  grid-template-rows: 50px 1fr 100px;
  grid-template-areas: "navbar navbar" "sidebar content" "footer footer";
}

.navbar {
  background-color: grey;
  padding: 5px;
  grid-area: navbar;
}

.footer {
  background-color: blue;
  padding: 5px;
  grid-area: footer;
}

.main {
  display: contents;
}

.sidebar {
  background-color: orange;
  padding: 5px;
  grid-area: sidebar;
}

.content {
  padding: 5px;
  grid-area: content;
}

<div class="navbar">
  Navbar
</div>
<div class="main">
  <div class="sidebar">
    Sidebar
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
    in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
    lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
    augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
    et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
    neque. Cras lobortis vel ipsum a fringilla.
  </div>
</div>
<div class="footer">
  Footer
</div>

CSS 網格布局 - CSS：層疊樣式表 | MDN
網格完整指南 | CSS 技巧

uj5u.com熱心網友回復：

在這里問題你的CSS代碼。

只需替換下面的 .main 類代碼

.main {
    min-height: calc(100vh - 150px);
    position: relative;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410089.html

標籤：

上一篇：將事件處理程式添加到HTMLProgress標簽

下一篇：XPath分離組的鍵和值