Зафиксируйте горизонтальную полосу прокрутки контейнера в нижней части экрана, не растягивая ее на всю ширину окна. - PullRequest
Новая
       56

Зафиксируйте горизонтальную полосу прокрутки контейнера в нижней части экрана, не растягивая ее на всю ширину окна.

0 голосов
/ 26 сентября 2019

У меня есть следующий макет:

HTML: 

<html>
  <head>
  </head>
  <body>
    <div class="sidebar-container">
      SIDEBAR
    </div>
    <div class="right-container">
      <div class="header">
        <div class="header-item">
          HEADER ITEM 1
        </div>
        <div class="header-item">
          HEADER ITEM 2
        </div>
      </div>
      <div class="dashboard">
        <div class="nav">
          SOME INNER NAVIGATION
        </div>
        <div class="table-container">
        TABLE CONTAINER
          <div class="table">
            TABLE
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS: 

.sidebar-container {
  position: fixed;
  width: 250px;
  height: 400px;
  background: lavender;
  margin-left: 50px;
  margin-right: 50px;
}

.right-container {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  padding: 15px;
  background: lightpink;
  margin: auto;
  margin-left: 320px;
}

.header {
  position: fixed;
  top: 0px;
  display: flex;
  background: lightblue;
  width: 100%;
  height: 30px;
  max-width: 1000px;
}

.header-item {
  flex: 1 1 auto;
}

.dashboard {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.nav {
  background: lightgrey;
}

.table-container {
  margin-top: 30px;
  background: lavenderblush;
  width: 100%;
  width: 100%;
  overflow-x: scroll;
}

.table-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border-radius: 10px;
}

.table-container::-webkit-scrollbar {
  height: 8px;
  background: red;
}

.table-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: lightgrey;
}

.table {
  background: lightsalmon;
  width: 1200px;
  height: 200px;
}

Codepen

Я реализую дизайн, который предоставляется мне.Чего мне нужно добиться, так это того, что горизонтальная полоса прокрутки table-container всегда прикреплена к нижней части экрана, но в основном сохраняет ее ширину (ну, на самом деле в дизайне она немного шире таблицы, немного растягивается наобе стороны, но дело в том, что она не растягивается под боковой панелью слева).

Она должна быть там в обоих случаях:

  • таблица содержит несколько записейпоэтому он не растягивается по вертикали (смоделируйте это, добавив height: 100px к table классу)
  • таблица имеет много записей (смоделируйте это, добавив огромное значение height к классу table, напримерheight: 2500px) - в этом случае вертикальная полоса прокрутки должна появиться в крайней правой части экрана («классическая»), что и происходит, и я хочу сохранить это поведение.
...