Блог

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

Проблема в том, что если прокручиваемый контент достаточно велик для прокрутки, он заставит прокручиваться всю страницу. Если он маленький, нижний колонтитул правильно располагается внизу.

Вот то, что у меня есть до сих пор

 * {  margin: 0;  padding: 0;  width: 100%; }  .container {  display: grid;  grid-template-rows: auto 1fr auto;  height: 100vh; }  .header {  height: 30px;  background-color: lightblue; }  .footer {  height: 30px;  background-color: lightblue; }  .content {  display: grid;  grid-template-rows: auto 1fr; }  .profile {  height: 60px;  background-color: lightpink; }  .tabs {  height: 20px;  background-color: lightgreen; }  .scroller {  background-color: cyan;  height: 100%;  overflow-y: scroll; }  .scrollable-content {  background-color: yellow;  width: 200px;  height: 600px;  margin: 0 auto;  position: relative; }  span {  bottom: 0;  left: 0;  position: absolute; } 

 lt;div class="container"gt;   lt;div class="header"gt;Headerlt;/divgt;    lt;div class="content"gt;  lt;div class="profile"gt;Profilelt;/divgt;  lt;div class="tab-control"gt;  lt;div class="tabs"gt;Tabslt;/divgt;  lt;div class="scroller"gt;  lt;div class="scrollable-content"gt;scrollable contentlt;spangt;endlt;/spangt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;    lt;div class="footer"gt;Footerlt;/divgt;  lt;/divgt; 

Любая помощь приветствуется

Это работает, если вы зададите наличие некоторых элементов overflow: hidden; . Установите это для .container , .content , и .tab-control

 .container, .content, .tab-control {  overflow: hidden; }  

У вас возникнет небольшая проблема с .scroller элементом, часть которого будет закрыта нижним колонтитулом.

Чтобы исправить это, добавьте и это:

 .tab-control {  display: flex;  flex-direction: column; }  .scroller {  flex: 100% 1 1; }  

Установите фиксированную высоту на скроллере. 100vh = высота браузера — 140px (суммарная высота всех остальных элементов на странице)

Установите overflow-y: авто на панели, которую вы хотите прокрутить, и вы можете установить высоту .прокручиваемого содержимого до нужного размера.

 .scroller {  background-color: cyan;  height: calc(100vh - 140px);  overflow-y: scroll; }  .scrollable-content {  background-color: yellow;  width: 200px;  height: 600px;  margin: 0 auto;  position: relative;  overflow-y: auto; }