Блог

Главная - Вопросы по программированию - Как разделить представление на 2 столбца с помощью css

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

#html #css

#HTML #css

Вопрос:

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

https://codepen.io/anon/pen/VRgbpN

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

Ответ №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>

Комментарии:

1. Большое вам спасибо, не могли бы вы рассказать мне, как это работает с css grid?

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