Как разделить веб-сайт HTML на 3 отдельных прокручиваемых элемента?

Question

Поэтому я пытаюсь создать веб-сайт, который разделен на 3 столбца, по которым вы можете прокрутить вниз по каждому из них по отдельности.

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

Извините, если это не имеет смысла.

Answer 1

Я не совсем понимаю, что вы имеете в виду под "странным куском", но это может быть отступ / отступ от элементов hderml oder body.

Вот рабочий пример использования overflow: auto для столбцов.Я использовал ширину 33,33%, чтобы быстро собрать все вместе, но вы, вероятно, захотите использовать надлежащие flex-атрибуты для равномерного выравнивания содержимого и добавления полей между ними.

html, body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  min-height: 100%;
}

body {
  display: flex;
}

.col {
  overflow: auto;
  max-height: 100vh;
  width: 33.33%;
}

<section class="col">
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...
</section>
<section class="col">
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>

Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...
</section>
<section class="col">
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>

Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...
</section>

Answer 2

Или с CSS grid

html, body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  min-height: 100%;
}

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.col {
  grid-column: 1 1;
  overflow: auto;
  max-height: 100vh;
}

<section class="col">
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...
</section>
<section class="col">
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>

Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...
</section>
<section class="col">
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>

Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...<br>
Some very lenghy content...
</section>