Сделайте содержимое внутри div прокручиваемым

У меня есть настройка, аналогичная приведенному ниже фрагменту кода. Моя цель - удерживать "синий" и "желтый" div в фиксированном положении, а "синий", если он содержит больше строк, чем доступное пространство, должен быть прокручиваемым.

Из-за характера кода я не могу изменить положение div в теле или жестко указать высоту (поскольку и заголовок, и высота полосы вычисляются во время выполнения).

Я должен добиться этого, только изменив CSS.

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

body {
  height: 100vh;
  margin: 0;
  background-color: white;
}

.app {
  margin: auto;
  max-height: 100%;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  background-color: orange;
  overflow: scroll;
}

.title {
  background-color: blue;
}

.rowcontainers {
  background-color: red;
}

.lowerbar {
  background-color: yellow;
  height: 56px;
}

<div class = "app">
  <div class = "main">
    <div class = "title">
      THIS TITLE HAS TO ALWAYS STAY HERE
    </div>
    <div class = "rowcontainers">
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
    </div>
  </div>
  <div class = "lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

Почему бы просто не сделать .rowcontainers прокручиваемым элементом вместо .main?

— 25.10.2022 19:00

Это хороший вопрос @HereticMonkey, когда я пытаюсь сделать так, чтобы основная высота принимала ту, которая требуется для дочерних элементов div (если она больше высоты экрана, нижняя полоса исчезает под экраном)

— 26.10.2022 17:19

@LucaReccia, ты решил эту проблему?

— 28.11.2022 16:37

Не в полной мере, лучшим решением было то, что было помечено как принятый ответ.

— 28.11.2022 21:16

html css flexbox

25.10.2022 18:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Измените это:

.main {
  background-color: orange;
  overflow: scroll;
  }

.rowcontainers {
  background-color: red;
}

к этому:

.main {
  background-color: orange;
}

.rowcontainers {
  background-color: red;
  overflow: auto;
  max-height: 400px; /*as much as you need*/
}

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

— 25.10.2022 18:52

Можете ли вы просто поделиться скриншотом, чтобы я мог четко видеть, что вы хотите. Потому что, насколько я понимаю, вы хотите, чтобы синий и желтый оставались на своих позициях, а красный можно было прокручивать, верно? И вы хотите использовать position: fixed для синего и желтого? Спасибо за комментарий брат!

— 25.10.2022 18:55

25.10.2022 18:44

Вам просто нужно добавить position: sticky; и top:0; в класс .title

body {
  height: 100vh;
  margin: 0;
  background-color: white;
}

.app {
  margin: auto;
  max-height: 100%;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  background-color: orange;
  overflow: scroll;
}

.title {
  background-color: blue;
  position: sticky;
  top: 0;
}

.rowcontainers {
  background-color: red;
}

.lowerbar {
  background-color: yellow;
  height: 56px;
}

<div class = "app">
  <div class = "main">
    <div class = "title">
      THIS TITLE HAS TO ALWAYS STAY HERE
    </div>
    <div class = "rowcontainers">
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
      ROWS NEED TO BE SCROLLABLE</br>
    </div>
  </div>
  <div class = "lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

25.10.2022 18:57

Вот решение, которое использует calc для определения максимальной высоты элемента rowcontianer. Вы уже указали, что хотите 100vh как высоту body и 56px как высоту lowerbar. Я добавил line-height: 1.4rem для элемента title.

Этот код будет работать до тех пор, пока title остается одной строкой текста, а lowerbar остается 56px.

body {
  height: 100vh;
  margin: 0;
  background-color: white;
}

.app {
  margin: auto;
  max-height: 100%;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  background-color: orange;
}

.title {
  background-color: blue;
  line-height: 1.4rem;
}

.rowcontainers {
  background-color: red;
  max-height: calc(100vh - 56px - 1.4rem); /* 56px (height of lowerbar) 1.4rem (line-height of title) Consider using flexbox methods if you think title may wrap to two lines or lowerbar might grow. */ 
  overflow: scroll;
}

.lowerbar {
  background-color: yellow;
  height: 56px;
}

<div class = "app">
  <div class = "main">
    <div class = "title">
      THIS TITLE HAS TO ALWAYS STAY HERE
    </div>
    <div class = "rowcontainers">
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
    </div>
  </div>
  <div class = "lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

Более надежный способ сделать это с помощью flexbox:

body {
  height: 100vh;
  margin: 0;
  background-color: white;
  display: flex;
  flex-flow: column nowrap;
}

.app {
  /* Added flex-grow and flex-basis: 100% so that app starts off at 100% height */
  flex: 1 0 100%;
  margin: 0 auto;
  max-width: 600px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  /* Added flex-grow and flex-basis: calc(100vh - 56px) so that main starts off 
     at 100% height of body less the height of lowerbar. Set the max-height to
     the same so that it doesn't grow too large. Could also set flex-grow to 0.*/
  flex: 1 0 calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  background-color: orange;
  display: flex;
  flex-flow: column nowrap;
}

.title {
  background-color: blue;
  /* The basis is one line, but it should expand as needed */
  flex: 1 0 1.4rem;
}

.rowcontainers {
  background-color: red;
  /* flex-grow is set to 0 so that it doesn't go beyond its container and keeps
     its initial height, allowing scroll to work. */
  flex: 0 0 100%;
  overflow: scroll;
}

.lowerbar {
  background-color: yellow;
  flex: 0 0 56px;
}

<div class = "app">
  <div class = "main">
    <div class = "title">
      THIS TITLE HAS TO ALWAYS STAY HERE, or things get messy really really really really really really really really quickly.
    </div>
    <div class = "rowcontainers">
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
      ROWS NEED TO BE SCROLLABLE<br>
    </div>
  </div>
  <div class = "lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
</div>

Привет, @Heretic Monkey, как я уже сказал, я не могу жестко закодировать учетные данные, а твое решение с использованием calc жестко закодирует их.

— 26.10.2022 17:45

25.10.2022 19:24

<html>

<head>
    <style>
        body {
            height: 100vh;
            margin: 0;
            background-color: white;
        }

        .app {
            margin: auto;
            max-height: 100%;
            max-width: 600px;
            background-color: black;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .main {
            background-color: orange;
            overflow: scroll;
        }

        .title {
            background-color: blue;
        }

        .rowcontainers {
            background-color: red;

            /* new properties below */
            overflow: scroll;
            height: 300px;
        }

        .lowerbar {
            background-color: yellow;
            height: 56px;
        }
    </style>
</head>

<body>
    <div class = "app">
        <div class = "main">
            <div class = "title">
                THIS TITLE HAS TO ALWAYS STAY HERE
            </div>
            <div class = "rowcontainers">
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
                ROWS NEED TO BE SCROLLABLE</br>
            </div>
        </div>
        <div class = "lowerbar">LOWER BAR AS TO ALWAYS STAY HERE</div>
    </div>
</body>

</html>

Я только что добавил это:

.rowcontainers {
    background-color: red;

    /* new properties below */
    overflow: scroll;
    height: 200px;
}

Пока браузер может обнаружить переполнение, он должен работать. Так что height: auto; не сработает

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

Эй, Бенджамин, ты дал контейнеру фиксированную высоту, это не очень хорошо работает с различными устройствами.

— 26.10.2022 17:52

25.10.2022 19:26

Ответ принят как подходящий

Для этого вы можете использовать комбинацию display: grid на .app и display: contents на .main.

Преимущества:

Работает с вашими динамическими высотами без необходимости их явного указания.
Растягивается, чтобы использовать все окно просмотра, независимо от того, достаточно ли у .rowcontainers контента или нет.
Заголовок не выглядит так, будто он является частью прокручиваемого контента (как в решении position: sticky).

/* Just ignore this script for toggling overflow content by clicking the button */ { const b = document.getElementById("togglescrolltest"), t = document.getElementById("scrolltest"), c = { block: ["none", "add scroll test"], none: ["block", "remove scroll test"] }; b.addEventListener("click", e => { const d = window.getComputedStyle(t).display; [t.style.display, b.textContent] = c[d]; });}

body {
  margin: 0;
}

.app {
  height: 100vh;
  /* grid stuff: */
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: min-content auto min-content;
}

.main {
  /* skip this tier in the DOM hierarchy for styling */
  display: contents;
}

.title {
  background: #00F;
}

.rowcontainers {
  background: #F00;
  /* scroll when necessary: */
  overflow: auto;
}

.lowerbar {
  background: #FF0;
  height: 56px;
}

/* test scrolling without extra markup */
#scrolltest {
  margin-top: 300vh;
}

<div class = "app">
  <div class = "main">
    <div class = "title">Header</div>
    <div class = "rowcontainers">
      <button type = "button" id = "togglescrolltest">remove scroll test</button>
      <div id = "scrolltest">...end scroll test.</div>
    </div>
  </div>
  <div class = "lowerbar">Footer</div>
</div>

25.10.2022 19:32

Другие вопросы по теме

HTML/CSS: сделайте наложение текста, но сохраняйте реакцию видео на события мыши (Elementor)

Тема витрины магазина Woocommerce Панель поиска товаров в центре страницы

Как сделать фон видео белым или прозрачным и изменить цвет заголовка?

Как ограничить количество символов и поставить... в конце

Кнопка прокрутки вверх видна только на рабочем столе (без мобильного)

Сосредоточиться на кнопках, работающих в консоли, но не где-либо еще?

Кнопки центрирования в Material-UI и React

Разное положение двух кнопок при каждом обновлении страницы

Сделать боковое меню липким с прокруткой

Liferea: изменить размер текста с помощью liferea.css

Сделайте содержимое внутри div прокручиваемым

Ответы 5

Другие вопросы по теме

Похожие вопросы