ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Html/CSS: верстка трех блоков
22 сообщений из 22, страница 1 из 1
Html/CSS: верстка трех блоков
    #38649627
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
казалось бы тривиальная задача, но....

нужно сверстать три блока:
headercontent footer
header и footer должны быть высотой auto (то есть по содержимому) и прилеплены соответственно сверху и снизу окна браузера, content должен занимать 100% оставшегося пространства, конструкция должна нормально реагировать на изменение размеров окна браузера.

Можно, конечно, абсолютно или фиксированно спозиционировать header и footer, но тогда content-контейнеру придется задавать поля, чтобы не накладывался на header и footer, и тогда нужно знать высоту header и footer и поля будут фиксированными, а я повторюсь: хочу auto-высоту для header и footer.

Попытался запилить таблицу с тремя ячейками, высота верхней и нижней auto, средней 100%, но это понимает только хром. ИЕ и Опера делают 100% высоту до нижнего края экрана, соответственно, footer улетает ниже.



Прошу совета

ЗЫ: JS не предлагать, с JS не проблема это запилить, хотелось бы нормальное решение на CSS
...
Рейтинг: 0 / 0
22.05.2014, 22:38
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38649742
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
нужно чтобы контент скроллился внутри content?
...
Рейтинг: 0 / 0
23.05.2014, 08:09
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38649771
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
Antonariy,

да, если содержимое больше размера контейнера content
ну в любом случае, я туда могу запихать дополнительный div с overflow:auto;, мне бы для начала получить сам контейнер нужного размера
...
Рейтинг: 0 / 0
23.05.2014, 09:16
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38649859
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
В ie такое можно было сделать при специальном доктайпе. В других браузерах у меня не получилось, и я забил и сделал фиксированные чердак и подвал.
...
Рейтинг: 0 / 0
23.05.2014, 10:47
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38649864
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
А опера вроде бы перешла на WebKit и теперь не должна отличаться от хрома.
...
Рейтинг: 0 / 0
23.05.2014, 10:48
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38649866
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
AntonariyА опера вроде бы перешла на WebKit и теперь не должна отличаться от хрома.я про старую оперу...
Antonariyя забил и сделал фиксированные чердак и подвал.с фиксированными полями?
...
Рейтинг: 0 / 0
23.05.2014, 10:50
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38649920
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Shocker.Proя про старую оперу...да ну ее в пень
Shocker.Proс фиксированными полями? http://csstemplater.com/
...
Рейтинг: 0 / 0
23.05.2014, 11:13
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38649932
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
Понятно, ну это решение с фиксированным размером, почти то же, что я и сам сверстал.

Видимо придется выставить поле снизу с помощью JS
...
Рейтинг: 0 / 0
23.05.2014, 11:20
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650031
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Предложу вот такой набросок...

 
Код: 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.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#container {
	width: 100%;
	height: 100%;
	min-height: 700px;
}
#container > table {
	width: 100%;
	height: 100%;
}
#header {
	height: 1%;
	background-color: yellow;
}
#header > div {
	max-height: 200px;
	overflow: auto;
}
#content {
	vertical-align: top;
}
#content > div {
	max-height: 400px;
	overflow: auto;
}
#footer {
	height: 1%;
	background-color: silver;
}
#footer > div {
	max-height: 100px;
	overflow: auto;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='container'>
	<table>
		<tr>
			<td id='header'>
				<div>
					<p>Служба Яндекс.Рефераты предназначена для студентов и школьников, 
					дизайнеров и журналистов, создателей научных заявок и отчетов — для 
					всех, кто относится к тексту, как к количеству знаков.
					</p>
					<p>Нажав на кнопку «Написать реферат» вы лично создаете уникальный 
					текст, причем именно от вашего нажатия на кнопку зависит, какой 
					именно текст получится — таким образом, авторские права на реферат 
					принадлежат только вам.
					</p>
					<p>Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст 
					Яндекс.Рефератов неповторим.
					</p>
					<p>Текстами рефератов можно пользоваться совершенно бесплатно, 
					однако при транслировании и предоставлении текстов в массовое 
					пользование ссылка на Яндекс.Рефераты обязательна.
					</p>
				</div>
			</td>
		</tr>
		<tr>
			<td id='content'>
				<div>
					<h1>Реферат по астрономии</h1>
					<h2>Тема: «Непреложный Тукан глазами современников»</h2>
					<p>Рефракция оценивает первоначальный метеорный дождь, об этом в минувшую 
					субботу сообщил заместитель администратора NASA. Афелий решает экваториальный 
					параметр, данное соглашение было заключено на 2-й международной конференции 
					"Земля из космоса - наиболее эффективные решения". Соединение, на первый 
					взгляд, иллюстрирует непреложный часовой угол, при этом плотность Вселенной 
					в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки 
					скрытой массы. Женщина-космонавт притягивает вращательный перигелий – у таких 
					объектов рукава столь фрагментарны и обрывочны, что их уже нельзя назвать 
					спиральными. Многие кометы имеют два хвоста, однако весеннее равноденствие 
					колеблет перигей, а оценить проницательную способность вашего телескопа 
					поможет следующая формула: Mпр.= 2,5lg Dмм + 2,5lg Гкрат + 4. 
					</p>
					<p>Эффективный диаметp, по определению, меняет вращательный эксцентриситет, 
					а время ожидания ответа составило бы 80 миллиардов лет. Угловая скорость 
					вращения выбирает метеорит, таким образом, атмосферы этих планет плавно 
					переходят в жидкую мантию. Небесная сфера наблюдаема. Декретное время, 
					как бы это ни казалось парадоксальным, многопланово меняет спектральный 
					класс (расчет Тарутия затмения точен - 23 хояка 1 г. II О. = 24.06.-771). 
					Космогоническая гипотеза Шмидта позволяет достаточно просто объяснить эту 
					нестыковку, однако метеорный дождь ищет непреложный сарос, тем не менее, 
					Дон Еманс включил в список всего 82-е Великие Кометы. Огpомная пылевая 
					кома наблюдаема. 
					</p>
					<p>Параметр неизменяем. Бесспорно, комета традиционно оценивает центральный 
					аргумент перигелия, а оценить проницательную способность вашего телескопа 
					поможет следующая формула: Mпр.= 2,5lg Dмм + 2,5lg Гкрат + 4. Математический 
					горизонт выбирает близкий сарос, тем не менее, уже 4,5 млрд лет расстояние 
					нашей планеты от Солнца практически не меняется. У планет-гигантов нет 
					твёрдой поверхности, таким образом межзвездная матеpия вероятна.
					</p>
				</div>
			</td>
		</tr>
		<tr>
			<td id='footer'>
				<div>
					<p>Служба Яндекс.Рефераты предназначена для студентов и школьников, 
					дизайнеров и журналистов, создателей научных заявок и отчетов — для 
					всех, кто относится к тексту, как к количеству знаков.
					</p>
					<p>Нажав на кнопку «Написать реферат» вы лично создаете уникальный 
					текст, причем именно от вашего нажатия на кнопку зависит, какой 
					именно текст получится — таким образом, авторские права на реферат 
					принадлежат только вам.
					</p>
					<p>Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст 
					Яндекс.Рефератов неповторим.
					</p>
					<p>Текстами рефератов можно пользоваться совершенно бесплатно, 
					однако при транслировании и предоставлении текстов в массовое 
					пользование ссылка на Яндекс.Рефераты обязательна.
					</p>
				</div>
			</td>
		</tr>
	</table>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
23.05.2014, 11:59
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650196
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Основная проблема при резиновых хедер и футер - разумеется резиновость самого контента.
Мне думается без контроля JS тут не обойтись в общем случае...
...
Рейтинг: 0 / 0
23.05.2014, 13:19
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650232
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
проверил только в хроме пока: на jsfiddle
...
Рейтинг: 0 / 0
23.05.2014, 13:39
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650352
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
krvsaПредложу вот такой набросок...спасибо, ну скроллинг в хедере/футере, конечно, не подойдет

Програмёрпроверил только в хроме пока: на jsfiddle как я писал выше, такой вариант я пробовал - он только в хроме и работает, тот же ИЕ уже не так отображает
...
Рейтинг: 0 / 0
23.05.2014, 14:45
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650414
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Shocker.ProkrvsaПредложу вот такой набросок...спасибо, ну скроллинг в хедере/футере, конечно, не подойдет
А как ты будешь контролировать их контент при уменьшении размеров окна?
...
Рейтинг: 0 / 0
23.05.2014, 15:16
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650418
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Shocker.Proскроллинг в хедере/футере, конечно, не подойдет
Убери его.
...
Рейтинг: 0 / 0
23.05.2014, 15:17
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650424
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
krvsaShocker.Proскроллинг в хедере/футере, конечно, не подойдет
Убери его.сорри, я перепутал окна jsfiddl-а, не твой пример смотрел, ща проанализирую
...
Рейтинг: 0 / 0
23.05.2014, 15:20
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650480
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
krvsa,

ну в конечном счете в твоем варианте камнем преткновения является
Код: css
1.
2.
3.
#content > div {
	max-height: 400px;
}


то есть фактически высота фиксирована для длинного текста, а если убрать - то работает только в хроме, так же, как и другие варианты с табличной версткой
...
Рейтинг: 0 / 0
23.05.2014, 16:24
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650498
alex564657498765453
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
alex564657498765453
Участник
а меня сразу в этой задаче смутило - а если хидер по высоте станет больше чем окно - что должно быть? и футер тоже?

я огдато делал подобное...счас не в спомню, но трюк там был имено с абсолютом.... от абсолюта посути я получил что - без него высота 100% или ауто или ещо чтото не давало нужного еффекта для контент части, а абсолют дал.

ЗЫ
делал интерфейс типо виндоус стола. редера там небыло, но полагаю мы все согласимся, что это самая простая(елементарная) часть данной задачи :).
...
Рейтинг: 0 / 0
23.05.2014, 16:40
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650506
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shocker.Pro
Участник
alex564657498765453а меня сразу в этой задаче смутило - а если хидер по высоте станет больше чем окно - что должно быть? и футер тоже?не станет, его пользователь заполнить не может, содержимое определяется программистом.

другие элементы игнорируют абсолют, поэтому опять же придется выделять поля, что нежелательно.... ну или по крайней мере я не вижу пока способа
...
Рейтинг: 0 / 0
23.05.2014, 16:47
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650539
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
AntonariyВ ie такое можно было сделать при специальном доктайпе.
Вот он, этот ископаемый шаблон, я его почистил от лишнего треша.
 
Код: 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.
39.
40.
41.
42.
43.
44.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Менеджер ключей активации</title>
		<meta name=vs_showGrid content="True">
		<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<styles>
            div {
	            BORDER-RIGHT: thin solid; 
	            BORDER-TOP: thin solid; 
	            OVERFLOW: auto; 
	            BORDER-LEFT: thin solid; 
	            BORDER-BOTTOM: thin solid; 
	            HEIGHT: 100%
            }

		</styles>
</head>
	<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 scroll=no>
			<table cellpadding=10 width="100%" border=1 height=100%>
				<tr>
					<td valign=top width="33%">
						<b>Генерация ключей активации</b><hr><br>
					</td>
					<td valign=top width="33%">
						<b>Поиск ключей активации</b><hr><br>
					</td>
					<td>
						<b>Данные ключа активации</b><hr><br>
					</td>
				</tr>
				<tr>
					<td colspan=3 height=100%>
						<div !HFTYPE="HFListObj" id="KeysList" @CLASSID="AKeysList" name="KeysList" >контент
							</table>
						</div>

					</td>
				</tr>
			</table>
	</body>
</html>

У меня не получилось запустить его под чистым ie, а после того как в 11 они сделали совершенной гейский дебаггер, я даже не могу найти, как переключить режим совместимости.
Однако в режиме веб-браузера содержимое div id="KeysList" прокручивается, а высота первой строки динамическая.
...
Рейтинг: 0 / 0
23.05.2014, 17:03
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650554
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
Antonariy,
я даже не могу найти, как переключить режим совместимости.
f12 Ctrl-8
...
Рейтинг: 0 / 0
23.05.2014, 17:15
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650558
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
-k2-Antonariy,
я даже не могу найти, как переключить режим совместимости.
f12 Ctrl-8был я там, но не догадался, что edge это режим ))

шаблон заработал в режиме ie5
...
Рейтинг: 0 / 0
23.05.2014, 17:19
| Ответить | Цитировать | Написать  
Html/CSS: верстка трех блоков
    #38650570
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Кстати от того doctype шаблон теперь не зависит, только от режима ie5.
Можно использовать <!DOCTYPE HTML>.
...
Рейтинг: 0 / 0
23.05.2014, 17:27
| Ответить | Цитировать | Написать  
22 сообщений из 22, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Html/CSS: верстка трех блоков
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38650232&tid=1447056]:
 0ms
get settings:
 11ms
get forum list:
 8ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 48ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 34ms
get tp. blocked users:
 1ms
others: 239ms
total:  353ms
созд. / загр.: 353ms
x
x
Закрыть


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