Как разделить вид на 2 столбца с помощью css

Я попытался создать разделенное представление с помощью CSS, я создал демонстрацию, чтобы проиллюстрировать свою идею.

Я хочу иметь column 1 и column 2, у обоих будет независимая полоса прокрутки, чтобы я мог прокручивать их отдельно. Я пытаюсь использовать сетку css и обнаружил, что не могу установить высоту column 1 и column 2 такой же высоты, как container. Если бы я мог это сделать, возможно, я мог бы использовать overflow: scroll, чтобы это произошло. Но я попробовал множество решений и обнаружил, что не могу установить высоту: 100% работает. Что я сделал не так? Есть ли лучшее решение для решения этой проблемы? Спасибо.

html css

23.03.2019 23:34

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 1

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

Добавьте flex: 1, если вы хотите, чтобы навигация и контент также заполняли всю ширину вашего контейнера.

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  border: 3px dotted red;
  display: flex;
}

.navi, .content {
  overflow-y: scroll;
  /* flex: 1 */
}

.navi {
  border: 3px dotted blue;
}

.content {
  border: 3px dotted yellow;
}

<div class = "container">
  <div class = "navi">
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
  </div>
  <div class = "content">
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    
  </div>
</div>

Большое спасибо, не могли бы вы сказать мне, что это не работает с сеткой CSS?

— 23.03.2019 23:53

Измените объявление grid-template-column на grid-template-rows: 1fr, а затем добавьте grid-column: 1; в свой класс navi и grid-column: 2; в свой класс содержимого. Наконец, дайте обоим декларацию overflow-y: scroll;.

— 24.03.2019 00:17

23.03.2019 23:49