Изменить ширину элемента после некоторой высоты

У меня вопрос простой - возможна ли такая раскладка? Я приложил некоторый код и то, как он должен выглядеть. В нем есть меню с категориями с одной стороны и продуктами с другой. Когда div с категориями заканчивается, div товаров должен заполнить всю ширину ниже. Разделение #products на два отдельных div не очень хорошая идея для меня, потому что, например, высота #menu может быть 1,5 ряда с картинками.

<style>
    #menu {
        ???
    }
    #products {
        ???
    }
</style>
<section class = "container">
    <div id = "menu">
        ...
    </div>
    <div id = "products">
        <img src....>
        ...more images
    </div>
</div>

html css

27.03.2019 22:21

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

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

Вы можете приблизиться к этому, используя CSS Grid.

.container {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.menu {
  background-color: orange;
  grid-row-start: 1;
  grid-row-end: 3;
}

.product {
  background-color: gray;
}

.menu,
.product {
  padding: 2em;
}

<div class = "container">
  <div class = "menu"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>
  <div class = "product"></div>  
</div>

jsFiddle

OP. Просто обратите внимание, что в зависимости от вашего вопроса вам может понадобиться JS для настройки размера меню/свойства css меню «grid-row-end», если, как вы говорите, оно динамическое.

— 27.03.2019 22:45

27.03.2019 22:27