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

发布于 2025-01-12 07:21:55 字数 1864 浏览 0 评论 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;
}

.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 来实现相同的功能。我尝试了多个步骤，但无法得到想要的结果。请帮助我解决这个问题。

原文

.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>

Result

The scrollbar is present in the middle of the screen. But I want to scrollbar to the extreme right. I want to implement the same using flexbox. I tried multiple steps but couldn't get the desired result. Pls help me with the issue.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉殇 2025-01-19 07:21:55

我认为，对于您想要实现的目标，使用 position: Sticky; 是您最好的选择。将滚动条放在主体上并且仍然保持侧边栏的固定位置将是一个挑战。我要做的就是在侧边栏上设置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>

I think with what you are trying to accomplish that using position: sticky; is your best bet. It's would be a challenge to get the scrollbar on the body and still have the fixed positioning of your sidebars. What I would do is set sticky on sidebars then use top: 0; to get them in place.

The only downfall to this solution (which is standard behavior) is that as soon as you reach the bottom of the scrollable content in content the sidebar's scrolls slightly. I added more content so you can see what I am referring to. This could be solved by setting a fixed 100vh container that contains all of this code and cannot be scrollable, then creating a scroll within that. You can also use 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>

回复收藏 0 原文

~没有更多了~