Страницы

Поиск по вопросам

среда, 19 декабря 2018 г.

Div. Занять оставшееся место

Возникла проблема с блочной вёрсткой. Допустим, у нас есть 3 блока:


Ширина sidebar-left и sidebar-right равна 300px и 250px соответственно. sidebar-left находится слева, sidebar-right – справа, content – между ними.
Как сделать так, чтобы ширина content занимала всё оставшееся место?


Ответ

Вводим дополнительный блок wrapper и работаем с дивами как с таблицей. И резиновое и вашим требованиям соответствует.
.wrapper { display: table; width: 100%; } .sidebar-left { width: 300px; display: table-cell; height: 200px; background: red; } .content { display: table-cell; height: 200px; background: green; } .sidebar-right { width: 250px; display: table-cell; height: 200px; background: blue; }


http://jsfiddle.net/en7dv0jw/
Извиняюсь за дублирование css свойств.

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

Отправить комментарий