Как сверстать страницу как в гугл справке?

Question

[grabbee]

Страница справки гугла имеет прямоугольник заданного цвета на фоне за блоком текста. Этот блок самостоятельно увеличивается в высоту в зависимости от количества пунктов в меню справа. Но когда меню нет или пунктов мало - имеет фиксированную высоту и от количества текста самой справки не зависит. https://support.google.com/youtube/answer/95725?hl...

Если уменьшить размер экрана, меню улетает вниз страницы, тем самым, этот блок фона/цвета растягивается до низа страницы. Подскажите пожалуйста, как разметить страницу в таком стиле? Я копался в коде страницы справки, но сделать также так и не получилось.

Comments

[Максим Тимофеев]

Что мешает Вам открыть инспектор кода и посмотреть как это сделано? Не работает правая кнопка мыши?

[grabbee]

Максим Тимофеев: там не всё так однозначно, я сам верстаю блоками, но там творятся чудеса - посмотрите сами

[Максим Тимофеев]

grabbee: Сделать за Вас? Или может быть есть конкретная проблема?

[grabbee]

Максим Тимофеев: сделайте пожалуйста, ведь если бы я смог, я бы не создавал вопроса. Lumore попытался, у него не вышло - посмотрите его ответ ниже. Я думаю это не так просто

[Максим Тимофеев]

grabbee: Это сервис вопрос ответ, а не сборище людей которым не чем заняться. Сделайте за меня - это на фриланс биржах. А тут сидят люди которые много работают и когда выпадает 5-10 минут помогают другим, которые много работают. Сделайте пример, выложите где-то - опишите что не работает - Вам дадут ответ. Сделайте за меня тут не работает.

[grabbee]

Максим Тимофеев: вот пример, посмотрите, он не работает codepen.io/Lumore/pen/xgaWpB
центральный блок текста растягивает красный блок фона, а у гуга он растягивается только менюхой справа. Что в нем не так? Как исправить?

[Максим Тимофеев]

grabbee: Что бы меню растягивало блок - меню должно быть в него вложено

[Максим Тимофеев]

Максим Тимофеев: У гугла основной контент разсягивается контентом а не меню, и на него стоит min-height: 232px; который не дает ему быть меньше чем меню

[Максим Тимофеев]

grabbee: codepen.io/anon/pen/vgzVZz

[grabbee]

и ваш пример не работает - я же говорил, нужно больше текста чтобы увидеть. вот ваш(я добавил секста) codepen.io/anon/pen/JEamBL

а вот гуглосправка https://support.google.com/youtube/answer/95725?hl...

Разницу же видно сразу.

Answer 1

[Lumore]

codepen.io/Lumore/pen/xgaWpB

Comments

[grabbee]

увеличьте количество текста - у вас вся страница красная, я так тоже смог :) у гугла увеличивается только до низа правого меню

[grabbee]

вот тут лучше видно https://support.google.com/youtube/answer/95725?hl...