Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите с версткой / 4 сообщений из 4, страница 1 из 1
10.03.2015, 11:58
    #38899676
?
?
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите с версткой
Возможно ли без Javascript сделать такую верстку, как на картинке? Сложность в том, что верхние заголовки могут слегка меняться по высоте. Устроит вариант и с таблицами и с дивами...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.03.2015, 11:58
    #38899677
?
?
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите с версткой
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2015, 13:13
    #38903758
?
?
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите с версткой
вроде получилось, но не везде правильно работает height:100%... Хромой, Опера - нормально. IE9, Мозилла - не растягивают DIV по всей высоте ячейки
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<!DOCTYPE html>
<html> <head> <title>Верстка</title>
<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;
  height:100%;
  overflow-y:scroll;
}
.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>
    <div class="content">Всё оставшееся пространство до подвала<br><br> </div>
  </td> </tr>
  <tr> <td class="footer">Подвал, высота 30px</td> </tr>
</table>
</body> </html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2015, 14:54
    #38903969
?
?
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подскажите с версткой
Поборол Firefox, но не работает даже в IE10. Останусь на варианте со скриптом.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<!DOCTYPE html>
<html> <head> <title>Верстка</title>
<style>
* {margin:0; padding:0; font:16px 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;}

.rel {position:relative;}
.content {
  position: absolute;
  left:0; top:0;
  height:100%; width:100%;
  background:#F08080;
  overflow-y:auto;
}

.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="rel">
    <div class="content">Всё оставшееся пространство до подвала<br><br>Много текста c прокруткой<br>
    <br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q
		<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q<br>q
    </div>
  </td> </tr>
  <tr> <td class="footer">Подвал, высота 30px</td> </tr>
</table>
</body> </html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подскажите с версткой / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 483ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446185]:
 0ms
get settings:
 11ms
get forum list:
 14ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 177ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 30ms
get tp. blocked users:
 1ms
others: 236ms
total:  483ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]