|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
10.03.2015, 11:28 | #1 |
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
|
Подскажите с версткой
Возможно ли без Javascript сделать такую верстку, как на картинке? Сложность в том, что верхние заголовки могут слегка меняться по высоте. Устроит вариант и с таблицами и с дивами...
Код HTML:
<!DOCTYPE html> <html> <head> <style> * {margin:0; padding:0; font:11pt Arial;} .main {position:absolute; width:100%; height:100%;} .main > div { padding:10px; position:absolute; left:0; right:0; } .h1 { top:0; background:#ffff00; } .h2 { top:37px; background:#A1C5EB; } .content { top:91px; bottom:50px; background:#F08080; overflow-y:scroll; } .footer { bottom:0; height:30px; background:#00ae00; } </style> </head> <body> <div class="main"> <div class="h1">Первый заголовок высотой 1-2 строчки</div> <div class="h2">Второй заголовок<br>высотой 1-2 строчки</div> <div class="content">Всё оставшееся пространство до подвала</div> <div class="footer">Подвал, высота 30px</div> </div> </body> </html> |
12.03.2015, 19:37 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Попробуй flex-box с фолбэком таблицами для старых ишаков.
Слоями кросс-браузерно тут затрахашся решать. Треш-вариант: через трансформ-ротейт + плавающие элементы)
Alar, верни репу!
|
12.03.2015, 21:52 | #3 |
Пользователь
Регистрация: 06.11.2013
Сообщений: 81
|
Так таблицу и делай. Две строки с нужными цветами бекграунда с тегами заголовков. А высота строк будет подстраиваться под высоту букв, если это правильно указать, а не задавать размеры.
|
13.03.2015, 09:44 | #4 |
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
|
Всем спасибо за подсказки! У нас на фирме в основном IE9+, некоторые юзают нормальные браузеры... В общем, остановился на таком решении
Код HTML:
<!DOCTYPE html> <html> <head> <style> * {margin:0; padding:0; font:11pt Arial;} html, body {width:100%; height:100%} .main { border-collapse:collapse; width:100%; height:100%; } .main td {vertical-align:top;} .h1 { height:2px; background:#ffff00; } .h2 { height:2px; background:#A1C5EB; } .content {background:#F08080;} .footer { height:30px; background:#00ae00; } </style> </head> <body> <table class="main"> <tr> <td class="h1">Первый заголовок высотой 1-2 строчки</td> </tr> <tr> <td class="h2">Второй заголовок<br>высотой 1-2 строчки</td> </tr> <tr> <td class="content">Всё оставшееся пространство до подвала</td> </tr> <tr> <td class="footer">Подвал, высота 30px</td> </tr> </table> </body> </html> |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Помощь с версткой | Masafi | HTML и CSS | 1 | 09.01.2014 17:26 |
Проблема с версткой!!! | Екатерина_21 | HTML и CSS | 1 | 19.09.2011 15:17 |
Проблема с версткой | vitaljaa | HTML и CSS | 7 | 03.07.2011 11:06 |
проблемы с версткой | AlexanderSolo | HTML и CSS | 1 | 20.11.2010 20:21 |