CSS Grid: высота 50% не работает во втором столбце

Я пытаюсь получить строки во втором столбце структуры сетки css на 50% по высоте.

У меня есть такой код:

grid-template-areas: "green red"
                     "green blue";
grid-template-rows: 100% 50%;
grid-template-columns: 1fr 300px;

Однако первая строка в этом столбце больше. Вот результат:

CSS Grid: высота 50% не работает во втором столбце

Я пробовал добавить:

#page > .red { max-height: 50%; }

но это дало мне:

CSS Grid: высота 50% не работает во втором столбце

Как добиться, чтобы высота двух строк во втором столбце составляла 50%?

JSFIDDLE: https://jsfiddle.net/busr380n/13/

#page > .green {
  grid-area: green;
  background-color: green;
}

#page > .red {
  grid-area: red;
  background-color: red;
}

#page > .blue {
  grid-area: blue;
  background-color: blue;
}


#page {
  display: grid;
  width: 100%;
  height: 250px;

  grid-template-areas: "green red"
                       "green blue";
  grid-template-rows: 100% 50%;
  grid-template-columns: 1fr 300px;

}

#page > .red { max-height: 50%; }

<section id = "page">
  <div class = "green"></div>
  <div class = "red"></div>
  <div class = "blue"></div>
</section>

html css css-grid

15.03.2018 18:46

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

976

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

Ответы 1

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

Это ваш код:

grid-template-areas: "green red"
                     "green blue";
grid-template-rows:  100% 50%;

Вы создали две строки. Но вы задали первой строке 100% высоту контейнера сетки. Это заставляет вторую строку существовать вне контейнера.

Попробуйте вместо этого:

grid-template-areas: "green red"
                     "green blue";
grid-template-rows:  50% 50%;

Нет необходимости в max-height на сетке.

#page {
  display: grid;
  height: 250px;
  grid-template-areas: "green red"
                       "green blue";
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 300px;
}

#page > .green {
  grid-area: green;
  background-color: green;
}

#page > .red {
  grid-area: red;
  background-color: red;
}

#page > .blue {
  grid-area: blue;
  background-color: blue;
}

<section id = "page">
  <div class = "green"></div>
  <div class = "red"></div>
  <div class = "blue"></div>
</section>

Я могу принять через 6 минут. Спасибо :) Большое спасибо.

— 15.03.2018 18:54

15.03.2018 18:50

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

Влияет ли добавление множества классов css на элемент на производительность?

Изменить ASP CheckBox с помощью CSS

Дублированный CSS границы

Таблица мобильных адаптивов не работает?

Получить значение радиокнопки с фоновым изображением

Ограничьте ширину границы, чтобы освободить место для метки без использования цвета фона для метки

Определить, отображается ли полоса прокрутки (например, на мобильном устройстве)

Почему CSS.supports () не работает при запуске с шуткой

Показать содержимое на основе содержимого div

Переполнение: скрыто, вызывая проблемы с макетом содержимого

CSS Grid: высота 50% не работает во втором столбце

JSFIDDLE: https://jsfiddle.net/busr380n/13/

Ответы 1

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

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