Каким способом реализовать такую вёрстку?

Question

[Павел Сергеев]

Уважаемые хабровчане!
Как можно реализовать такую верстку?

Смысл такой: внутри желтого блока (div с фоновым изображением) должен находиться блок со всем контентом с возможностью прокрутки. сам же желтый блок должен быть адаптивным; всё должно вмещаться в экран пользователя, без полосы прокрутки.
Заранее спасибо.

Answer 1

[MhMadHamster]

https://jsfiddle.net/q1og249k/1/

Comments

[Виталий Инчин ☢]

+text-align: center;

[Павел Сергеев]

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

[MhMadHamster]

Павел Сергеев: https://jsfiddle.net/q1og249k/4/ только в таком случае оно будет тянуться

[Dartess]

я бы добавил немного магии :)
https://jsfiddle.net/4nap73nx/

Answer 2

[Konstantin]

https://jsfiddle.net/q1og249k/3/ :)

Answer 3

[Kaunov_ivan]

Идеальный вариант с адаптивностью:
frontender.info/a-guide-to-flexbox

Ниже есть подобный пример