Будет трудно описать, но я попробую. Есть header
и footer
, которые спозиционированы фиксировано. В блоке контента есть верхний и нижний отступ. Под верхним отступом, а следовательно и под header'ом
есть блок с текстом. После текстового блока идет блок, назовем его row
, c колонками - col
. В каждом из col
есть верхняя часть - это картинка заданная backgound'ом
и нижняя часть - это блоки информации. Вопрос: как с помощью js высчитать все margin
, padding
и height
, что бы блоки col
были "резиновыми".
-
2Не надо использовать js. – Qwertiy♦ 7 сен '16 в 15:03
1 ответ
Если нет в планах использовать какую-нибудь готовую библиотеку типа Bootstrap, можно воспользоваться парой трюков css, но уж точно не js. Вот самый простецкий пример на css JSFiddle:
* {
box-sizing: border-box;
}
#header, #content, .row, #footer {
border:1px solid black;
}
.row::after {
content: "";
clear: both;
display: block;
}
.col {
width:33.33%;
border:1px solid red;
float:left;
}
Высота будет формироваться в зависимости от содержимого. Так же можно задать параметр min-width. Так же можно задать параметр, чтобы для определённой величины экрана колонки смещались одна под одну и занимали 100% ширины. Короче, по принципу того, как это делается в той же сетке в Bootstrap.