Верстка DIV'ами. Контент на всю полезную площадь окна

Viento · January 19, 2011

здравствуйте! несколько дней бьюсь над следующей проблемой: в нижеприведенной разметке, когда контент короткий (1 строка на моем мониторе) после футера остается пустое место до нижнего края монитора.

<div id="header">
	<div id="logo">
		<a href="" title=""><img src="" width="114" height="80" alt="" /></a>
	</div>
	<div id="topmenu">
		<div><a href="" title=""><img src="" width="32" height="32" alt="" /></a> <a href="" title=""><img src="" width="32" height="32" alt="" /></a> <a href="" title=""><img src="" width="32" height="32" alt="" /></a></div>
	</div>
</div>
<div id="header2">
	<div id="menu">
		<ul>
			<li class="first"><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="splash"></div>
</div>
<hr />
<div id="page">
	<div id="content">
		<div>
			<h1 class="title"></h1>
				<div>
					<div style="background: url(images/left.jpg) repeat-y top left;"><div style="background: url(images/up.jpg) repeat-x top left;">
				   	<div style="background: url(images/right.jpg) repeat-y top right;"><div style="background: url(images/down.jpg) repeat-x bottom left;">
					<div style="background: url(images/left_upper.jpg) no-repeat top left;"><div style="background: url(images/right_upper.jpg) no-repeat top right;">
					<div style="background: url(images/right_lower.jpg) no-repeat bottom right;"><div style="background: url(images/left_lower.jpg) no-repeat bottom left;">
						<div class="content">
							<p>Контент</p>
						</div>
					</div></div></div></div></div></div></div></div>
				</div>
		</div>
	</div>
	<div style="clear: both; padding: 0; margin: 0;"> </div>
</div>
<div id="footer-wrapper">
	<div id="footer">
		<p id="legal">© 2010 <a href="" title=""><strong></strong></a> Все права защищены.</p>
		<p id="links"><a href="">О проекте</a> | <a href="">Контакты</a> | <a href="">Правила</a></p>
	</div>
</div>

собственно вопрос: как сделать, чтобы вот этот <div class="content"> занимал все оставшееся место на экране после шапки и футера сайта? если контента мало, чтобы после футера не было пустого пространства.

8 вложенных <div style="background: url... рисуют обрамление контентного блока в виде листа бумаги.

п.с. прошу прощения, если невнятно объяснил. я сам не верстальщик, а программист.

Vlad · January 19, 2011

Картинки для наглядности у вас нет?

Viento · January 19, 2011

ssdfd

Edited February 8, 2011 by Viento

htmlonline · January 20, 2011

Как это ты дивами лист бумаги нарисовал? Сам я картинкой такой эффект делал.

Расскажи пожалуйста в личку.

Viento · January 20, 2011

Как это ты дивами лист бумаги нарисовал? Сам я картинкой такой эффект делал.
Расскажи пожалуйста в личку.

к сожалению в личку не получается. прав нет

ну да, картинками и сделано. в каждом ДИВ - углы и стороны "листа".

WalkMan · January 25, 2011

жс тебе в помощь по рястягиванию листа

ТС

а зечем ты картинку в ширь резиновой делал? она гдето в ширь меняеться?

Edited January 25, 2011 by WalkMan

Viento · January 25, 2011

жс тебе в помощь по рястягиванию листа
ТС
а зечем ты картинку в ширь резиновой делал? она гдето в ширь меняеться?

не понял, какая картинка резиновая у меня?

JavaScript пытался применять. но, честно говоря, не получается. не могу понять, с какой стороны подойти к этому делу. ЧТО нужно изменять по высоте КАКУЮ высоту указывать..

WalkMan · January 25, 2011

не понял, какая картинка резиновая у меня?
JavaScript пытался применять. но, честно говоря, не получается. не могу понять, с какой стороны подойти к этому делу. ЧТО нужно изменять по высоте КАКУЮ высоту указывать..

имел ввиду листик

по жс

в начале хтмл прижимаеш футер

далее есди высота хедера и футера динамическая

то поределяешь их высоту (если фикс то можно константой)

и все

если листок меньше (высота видимой области - высота хедера с футером - всякие маргины падинги бордеры)

то даешь ему эту же высоту:

высота видимой области - высота хедера с футером - всякие маргины падинги бордеры

Viento · January 25, 2011

имел ввиду листик
по жс
в начале хтмл прижимаеш футер
далее есди высота хедера и футера динамическая
то поределяешь их высоту (если фикс то можно константой)
и все
если листок меньше (высота видимой области - высота хедера с футером - всякие маргины падинги бордеры)
то даешь ему эту же высоту:
высота видимой области - высота хедера с футером - всякие маргины падинги бордеры

не, лист вроде фиксированный по ширине :blush:

очень извиняюсь, но могли бы вы куски кода набросать примерно. я в этих делах совсем плохо понимаю. что то готовое переделать - еще более или менее могу. а с нуля написать...

WalkMan · January 25, 2011

не, лист вроде фиксированный по ширине
очень извиняюсь, но могли бы вы куски кода набросать примерно. я в этих делах совсем плохо понимаю. что то готовое переделать - еще более или менее могу. а с нуля написать...

по листу вопрос на засыпку

если он на макете фикс ширины, то зачем его делать резиновым в ширь, при этом используя кучу дивов если можно обойтись тремя?

по жс звиняй я сам не ахти в этом деле

надо рыться в справочниках

алгоритм смотри выше

операторы смотри в книжке

Edited January 25, 2011 by WalkMan

Viento · January 25, 2011

по листу вопрос на засыпку
если он на макете фикс ширины, то зачем его делать используя кучу дивов если можно обойтись тремя?
по жс звиняй я сам не ахти в этом деле
надо рыться в справочниках
алгоритм смотри выше
операторы смотри в книжке

ок. пасиб

а как можно тремя то дивами? я ж говорю, я не верстальщих. как догадался, так и сделал. буду рад оптимизировать.

WalkMan · January 25, 2011

ок. пасиб
а как можно тремя то дивами? я ж говорю, я не верстальщих. как догадался, так и сделал. буду рад оптимизировать.

письмо из 3 дивов и внешенго оберткой

можно и по другому

тут кто что любит и какие задачи

<div>

</div>

внешний это обертка

1- верх листа

2-средняя часть которая репитеться по вертикали

3- нижний кусок картинки с загнутым листом

а на грамотный толк сказать закачику что оптимизация и бла бла бла и сделать бордер цсс

а в угол просто картинку загнать куда надо

Viento · January 25, 2011

письмо из 3 дивов и внешенго оберткой
можно и по другому
тут кто что любит и какие задачи
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
внешний это обертка
1- верх листа
2-средняя часть которая репитеться по вертикали
3- нижний кусок картинки с загнутым листом
а на грамотный толк сказать закачику что оптимизация и бла бла бла и сделать бордер цсс
а в угол просто картинку загнать куда надо

понял :blush: спасибо! заказчика нет - для себя делаю.

WalkMan · January 25, 2011

понял спасибо! заказчика нет - для себя делаю.

тогда забудь все что сказал кроме алгоритма

внешнему задаешь бекграунд цвета рамки и паддинг=толщине рамки

внутренний

фон белый и бек уголок картинки(картинка уже без бордера)

мона и с бордером с тегом имг

кароч сам себе мастер

Viento · January 25, 2011

тогда забудь все что сказал кроме алгоритма
<div><div></div><div>
внешнему задаешь бекграунд цвета рамки и паддинг=толщине рамки
внутренний
фон белый и бек уголок картинки(картинка уже без бордера)
мона и с бордером с тегом имг
кароч сам себе мастер

да, ты когда написал свой вариант, я уже все понял :blush: я просто автоматически сделал готовый вариант, который уже когда то применял.

но это ладно. и так все работает главное сделать, чтобы пустых мест не оставалось на сайте

WalkMan · January 25, 2011

яркий пример Сколько можно придумывать себе сложности? :blush:

Viento · January 25, 2011

яркий пример Сколько можно придумывать себе сложности?

в смысле?

WalkMan · January 25, 2011

топик такой в флейме есть

смысл которого

нафига городить лишний код если он не нужен

и ломать голову над несуществующими проблемами

чем проще код тем он более кроссбраузерен

Edited January 25, 2011 by WalkMan

Viento · January 25, 2011

топик такой в флейме есть
смысл которого
нафига городить лишний код если он не нужен
и ломать голову над несуществующими проблемами
чем проще код тем он более кроссбраузерен

это да :blush:

Sign In

Верстка DIV'ами. Контент на всю полезную площадь окна

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information