Как я могу создать прокручиваемую область, которая изменяет размеры с помощью браузера, но также имеет фиксированную область содержимого выше и ниже значительной области?

Question

Я извиняюсь, потому что, хотя я уверен, что это было задано, я не могу найти решение после значительного поиска.

У меня есть таблица, в которую может быть загружено много данных. Эта таблица размещается в области содержимого, которая является частью шаблонного сайта, и в этой области содержимого будет заголовок и область фильтра над таблицей. Под столом ряд кнопок. Таблица должна расти, чтобы заполнить окно, но обе кнопки внизу страницы, а также информация заголовка / фильтра вверху страницы всегда должны оставаться в окне браузера.

Пример кода ниже это общий план HTML, с которым я работаю. У меня есть заголовок и фильтр div, которые должны оставаться в верхней части окна контента, в то время как кнопки внизу должны оставаться «закрепленными» внизу окна браузера.

Таблица (или ее содержащий div) должен увеличиваться, чтобы заполнить все пространство посередине, и полосы прокрутки должны появляться, когда содержимое становится большим для окна в середине области содержимого.

<!-- site template content above -->
<div id="where the content is loaded for all pages">
  <div class="page-title"> <!-- Needs to stay at the top of the content box. SHOULD NOT vertically scroll out of view. -->
    Show a title, at the top of the page!
  </div>
  <div class="filters"> <!-- Should stay at the top, anchored below the Page Title div. -->
    <input type=text value="blah blah blah" />
    ...
  </div>
  <div class="fill-until-scrollable"> <!-- This needs to grow to fit (both x & y) as the browser window grows. -->
    <table> <!-- This table can have a lot of data. Assume it's height to be 100% of it's content, however, the fill-until-scrollable parent will need to have proper overflow/sizing CSS settings so that if the table data will be scrollable if it's to large for the window, without hiding the buttons below. -->
      ...
    </table>
  </div>
  <div class="action-buttons"> <!-- This needs to be the full width of the page, anchored at the bottom of the browser window. -->
    <button>Foo</button>
    <button>Bar</button>
  </div>
</div>
<!-- site template content below -->

Я знаю это должна быть общая необходимость, но я не могу найти способ сделать это. Любые простые примеры будут оценены. Спасибо.

Answer 1

Flexbox позволит вам решить эту проблему, если ваш контейнер где-то имеет заданную высоту.

.page {
  width: 100%;
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
}

.page-title,
.filters,
.action-buttons {
  width: 100%;
  flex: 0 0 auto;
}

.fill-until-scrollable {
  flex: 1 1 0;
  overflow: auto;
}

/* Just for the demo… delete these after */
.page { height: 40vh; /* I'm guessing 100vh in your case? */ }
.fill-until-scrollable table { display: block; height: 250vh; background: linear-gradient(00deg, grey, pink); }

<!-- site template content above -->
<div class="page" id="where the content is loaded for all pages">
  <div class="page-title"> <!-- Needs to stay at the top of the content box. SHOULD NOT vertically scroll out of view. -->
    Show a title, at the top of the page!
  </div>
  <div class="filters"> <!-- Should stay at the top, anchored below the Page Title div. -->
    <input type=text value="blah blah blah" />
    ...
  </div>
  <div class="fill-until-scrollable"> <!-- This needs to grow to fit (both x & y) as the browser window grows. -->
    <table> <!-- This table can have a lot of data. Assume it's height to be 100% of it's content, however, the fill-until-scrollable parent will need to have proper overflow/sizing CSS settings so that if the table data will be scrollable if it's to large for the window, without hiding the buttons below. -->
      ...
    </table>
  </div>
  <div class="action-buttons"> <!-- This needs to be the full width of the page, anchored at the bottom of the browser window. -->
    <button>Foo</button>
    <button>Bar</button>
  </div>
</div>
<!-- site template content below -->

Answer 2

Если элементы фильтра и кнопки имеют фиксированную высоту, вы можете использовать cal c (), чтобы установить высоту прокручиваемого элемента, например:

. fill-until-scrollable { height:calc(100% - 250px); overflow: auto;  }

Где 250px - это общая высота остальных дивы.

Answer 3

Легко, если все элементы, кроме .fill-until-scrollable, имеют известную высоту.

<style>
#container {
  position: relative;
  height: 100vh
}
#container > div {
  position: absolute;
  left: 0; right: 0;
  border: 1px solid #ccc
}
.page-title {
  top: 0;
  height: 100px;
}
.filters {
  top: 100px;
  height: 100px;
}
.fill-until-scrollable{
  overflow: auto; 
  top: 200px;
  bottom: 100px
}
.action-buttons {
  bottom: 0;
  height: 100px;
}
</style>