HTML/CSS 在固定导航栏上具有两个固定侧边栏和屏幕右侧带有滚动条的可滚动内容的样式

Question

.navbar {
  height: 10%;
  width: 100%;
  background: rgb(51, 204, 51);
  position: fixed;
  z-index: 999;
}

.dashboard {
  display: flex;
  top: 10%;
  height: 90%;
  width: 100%;
  position: fixed;
}

.sidebar {
  border-right: 1px solid #ededed;
  background: #36c;
  flex: 1 0 10%;
  padding: 1rem;
}

.content {
  overflow-y: auto;
  flex: 5;
}

.data {
  font-size: 50px;
}

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="app.css" />
</head>

<body>
  <div class="navbar">navbar</div>
  <div class="dashboard">
    <div class="sidebar">sidebar</div>
    <div class="content">
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
    </div>
    <div class="sidebar">sidebar</div>
  </div>
</body>

</html>

结果

滚动条出现在屏幕中间。但我想滚动条到最右边。我想使用 flexbox 实现相同的功能。我尝试了多个步骤，但无法获得想要的结果。请帮我解决这个问题。

Answer 1

我认为使用 position: sticky; 是您的最佳选择。将滚动条放在正文上并保持侧边栏的固定位置将是一个挑战。我要做的是在 sidebars 上设置 sticky，然后使用 top: 0; 将它们放置到位。

此解决方案（这是标准行为）的唯一缺点是，一旦您到达 content 中可滚动内容的底部，侧边栏就会轻微滚动。我添加了更多内容，以便您可以看到我指的是什么。这可以通过设置一个固定的 100vh 容器来解决，该容器包含所有这些代码并且不能滚动，然后在其中创建一个滚动。您也可以使用 js.

body {
  width: 100%;
  overflow-y: auto;
  margin: 0;
}

.navbar {
  height: 10%;
  width: 100%;
  background: rgb(51, 204, 51);
  position: fixed;
  z-index: 999;
}

.dashboard {
  display: flex;
  top: 10%;
  height: 90%;
  width: 100%;
  position: fixed;
  overflow-y: auto;
}

.sidebar {
  border-right: 1px solid #ededed;
  background: #36c;
  flex: 1 0 10%;
  padding: 1rem;
  height: 100%;
  width: 10%;
}

.one { 
  position: sticky;
  width: 10%;
  top: 0;
  overflow: hidden;
}

.two {
  position: sticky;
  width: 10%;
  right: 0;
  top: 0;
  overflow: hidden;
}

.content {
  flex: 5;
  width: 80%;
  display: inline-block;
}

.data {
  font-size: 50px;
}

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="app.css" />
</head>

<body>
  <div class="navbar">navbar</div>
  <div class="dashboard">
    <div class="sidebar one">sticky sidebar one</div>
    <div class="content">
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
      <div class="data">a</div>
    </div>
    <div class="sidebar two">sticky sidebar two</div>
  </div>
</body>

</html>

HTML/CSS 在固定导航栏上具有两个固定侧边栏和屏幕右侧带有滚动条的可滚动内容的样式

HTML/CSS style for having on fixed navbar two fixed sidebars and scrollable content with scrollbar at right of screen

html

css

sidebar

scrollbar

flexbox

结果