滚动 Flexbox 网格

发布于 2025-01-11 00:06:32 字数 2374 浏览 2 评论 0原文

我正在尝试制作一个基本的仪表板布局，其中包含三列和各种不同大小的框来保存图形/表格/统计信息等。我正在尝试使主仪表板成为可滚动元素，导航栏和其他元素在其周围固定。我的问题是滚动不允许我滚动浏览所有不同的框，只能滚动一行半。如果有人能在这方面帮助我，那就太棒了！

body {
  overflow: hidden;
}

.app {
  overflow: hidden;
}

.dashboard {
  width: 1280px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-left: 150px;
  overflow-y: auto;
}

.graph-box {
  width: 350px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.table-box {
  width: 740px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
}

<body>
  <div id="app">
    <div class="dashboard">
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="table-box">
        <div class="table">
          <table>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
            <tr>
              <td>Alpha</td>
              <td>Beta</td>
              <td>Gamma</td>
            </tr>
            <tr>
              <td>Delta</td>
              <td>Epsilon</td>
              <td>Zeta</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
    </div>
</body>

原文

I'm trying to make a basic dashboarding layout with three columns and various different size boxes to hold graphs/tables/stats etc. I am trying to make the main dashboard a scrollable element, with navbars and other elements being stationary around it. My problem is that the scrolling doesn't allow me to scroll through all the different boxes, only 1 and a half of the rows. If anyone could assist me on this that would be awesome!

body {
  overflow: hidden;
}

.app {
  overflow: hidden;
}

.dashboard {
  width: 1280px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-left: 150px;
  overflow-y: auto;
}

.graph-box {
  width: 350px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.table-box {
  width: 740px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
}

<body>
  <div id="app">
    <div class="dashboard">
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="table-box">
        <div class="table">
          <table>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
            <tr>
              <td>Alpha</td>
              <td>Beta</td>
              <td>Gamma</td>
            </tr>
            <tr>
              <td>Delta</td>
              <td>Epsilon</td>
              <td>Zeta</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
    </div>
</body>

分享到QQ

分享到微博

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

发布评论

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

短暂陪伴 2025-01-18 00:06:32

您可以尝试将仪表板元素高度设置为 100vh（或任何需要的大小），以便滚动实际上知道它有多少空间。

.dashboard {
  width: 1280px;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-left: 150px;
  overflow-y: auto;
}

.graph-box {
  width: 350px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.table-box {
  width: 740px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
}

<body>
  <div id="app">
    <div class="dashboard">
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="table-box">
        <div class="table">
          <table>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
            <tr>
              <td>Alpha</td>
              <td>Beta</td>
              <td>Gamma</td>
            </tr>
            <tr>
              <td>Delta</td>
              <td>Epsilon</td>
              <td>Zeta</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
    </div>
  </div>
</body>

You can try setting the dashboard element height to 100vh (or whatever size it needs to be), so the scroll actually knows how much real estate it has.

.dashboard {
  width: 1280px;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-left: 150px;
  overflow-y: auto;
}

.graph-box {
  width: 350px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.table-box {
  width: 740px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
}

<body>
  <div id="app">
    <div class="dashboard">
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="table-box">
        <div class="table">
          <table>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
            <tr>
              <td>Alpha</td>
              <td>Beta</td>
              <td>Gamma</td>
            </tr>
            <tr>
              <td>Delta</td>
              <td>Epsilon</td>
              <td>Zeta</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
    </div>
  </div>
</body>

回复收藏 0 原文

~没有更多了~