Нужно растянуть дизайн по вертикали

Pinguin · April 14, 2009

Помогите, пожалуйста, разобраться. Сделал макет: http://www.trinity-bridge.221b.ru/index.htm Заточен был под 1024х768, вроде всё ничего.

Посмотрел на большом разрешении - захотелось растянуть дизайн по вертикали, чтобы внизу не было пустого места. Ширина макета 1000 px, высота 99%. Проштудировал вот это: http://htmlbook.ru/content/?id=95 Что-то не работают у меня эти рецепты. Один рецепт воплощён здесь: http://www.trinity-bridge.221b.ru/index2.htm В Опере выглядит нормально, хотя в Dreamweaver стало не видно ничего. А в IE6 показывает только фон и ни одного объекта.

Можно ли сделать универсальный код, или без хаков не обойтись?

body {
	background-color: #0B2F6F;
	background-image: url(texture/BodyFill.png);
	width: auto;
	height: auto;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #000000;
	text-align: center;
	overflow: visible;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
}
p {
	margin: 0mm;
}
h1 {
	font-size: 18pt;
	background-position: left center;
	text-indent: 15pt;
	background-image: url(texture/h1.gif);
	background-repeat: no-repeat;
	color: #333366;
}
.imgRight {
	float: right;
	border: 3px ridge #FFFFFF;
	margin-left: 15px;
	margin-bottom: 15px;
	cursor: default;
}
#main {
	width:1000px;
	z-index:0;
	overflow: hidden;
	position: absolute;
	border-bottom-width: 2px;
	border-bottom-style: ridge;
	border-bottom-color: #003366;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: ridge;
	border-left-style: ridge;
	border-right-color: #003366;
	border-left-color: #003366;
	left: 50%;
	visibility: visible;
	height: 99%;
	margin-left: -502px;
	background-image: url(texture/top.png);
	background-repeat: repeat-x;
	background-position: -6px 0px;
}
#BandLeft {
	position:absolute;
	left:26px;
	top:0px;
	width:210px;
	height:100%;
	z-index:3;
	visibility: visible;
	overflow: hidden;
}
#BandBottom {
	left: 0px;
	top: 297px;
	background-image: url(texture/BandBott.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 342px;
	width: 210px;
	z-index: 2;
	visibility: visible;
}
#Address {
	color: #FFFFFF;
	position: absolute;
	top: 285px;
	left: 0px;
	text-align: center;
	visibility: visible;
	width: 100%;
	cursor: text;
	z-index: 3;
}
#menu {
	position: absolute;
	left: 333px;
	top: 0px;
	z-index: 5;
	margin: 0px;
	padding: 0px;
	visibility: visible;
}
#menu dt {
	float: left;
	width: 113px;
	display: block;
	left: 0px;
	top: 76px;
	position: relative;
	font-weight: bold;
	text-align: center;
}
#menu a {
	text-decoration: none;
	display: block;
	background-position: 0px -25px;
	color: #FFFFFF;
}
#menu a:hover, #menucurr {
	color: #99CCFF;
	font-weight: bold;
	background-color: #333366;
	display: block;
}
#Title {
	background-image: url(texture/title.png);
	background-repeat: no-repeat;
	height: 24px;
	width: 351px;
	position: absolute;
	left: 442px;
	top: 0px;
	visibility: visible;
	z-index: 6;
}
#MainCont {
	text-indent: 10pt;
	vertical-align: top;
	text-align: justify;
	width: 660px;
	border: 4px inset #6699CC;
	background-color: #CCCCCC;
	background-image: url(texture/ContFill.png);
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 30px;
	padding-right: 30px;
	overflow: auto;
	position: absolute;
	visibility: visible;
	z-index: 4;
	right: 10px;
	cursor: text;
	top: 105px;
	bottom: 10px;
}

Justnewone · April 14, 2009

Уже в пицотый раз, поиском воспользуйтесь

Pinguin · April 14, 2009

Уже в пицотый раз, поиском воспользуйтесь

Вполне возможно. Вот только бы знать, что искать... Если не трудно, ткните носом в ссылку.

Pinguin · April 15, 2009

Не вижу я на форуме ничего по теме, всё вокруг да около.

Наверно, стоит уточнить кое-что:

1. Body не должен иметь полос прокрутки никогда.

2. Весь макет имеет фиксированные размеры, кроме поля контента, которое должно растягиваться до низа экрана, а если контент не вмещается - иметь полосу прокрутки.

Searcher · April 15, 2009

Если контент не вмещается по вертикали, то кто должен "иметь" полосу прокрутки?

Ну а если серьезно, полоса прокрутки должна у окна появляться или у слоя с контентом?

Pinguin · April 15, 2009

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

Я как раз сегодня об этом писал. Вертикальная полоса прокрутки должна появляться только у слоя с контентом. Шапка и меню должны висеть сверху неподвижно.

Searcher · April 15, 2009

Да в чем проблема то... Это ж элементарно при обычных знаниях css и html... Вот так например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>site name</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style>

* {
	margin : 0;
	padding : 0;
	border : 0;
}

html, body {
	width: 100%;
	height:100%;
	overflow: hidden;
}

li {
	list-style-position: inside;
}

#main {
	position: relative;
	width: 80%;
	height: 100%;
	margin: 0 auto;
	border-left: 1px dashed black;
	border-right: 1px dashed black;
}

#header {
	background-color: #FFB;
	height: 100px;
}

#menu {
	background-color: #BFF;
	width: 200px;	
	float: left;
}

#content {
	background-color: #FBF;
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 0;
	left: 200px;
	overflow: auto;
	*height: expression(parentNode.offsetHeight - 100 + 'px');
	*width: expression(parentNode.offsetWidth - 202 + 'px');
}

</style>

</head>
<body>
	<div id="main">
		<div id="header">
			Шапка - каска :)
		</div>
		<div id="menu">
			<p>Меню - шменю</p>
			<ul>
				<li><a href="">пункт 1</a></li>
				<li><a href="">пункт 2</a></li>
				<li><a href="">пункт 3</a></li>
				<li><a href="">пункт 4</a></li>
				<li><a href="">пункт 5</a></li>
				<li><a href="">пункт 6</a></li>
				<li><a href="">пункт 7</a></li>
		</div>
		<div id="content">
			<p>Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент 
			Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент Контент - шмонтент </p>
		</div>
	</div>
</body>
</html>

...только для ИЕ6 костыли как всегда понадобились

Edited April 15, 2009 by Searcher

Pinguin · April 15, 2009

Да в чем проблема то... Это ж элементарно при обычных знаниях css и html... Вот так например:
...только для ИЕ6 костыли как всегда понадобились

"Только"? Да это "только" - единственный цимус, который есть в вашем примере.

*height: expression(parentNode.offsetHeight - 100 + 'px');

*width: expression(parentNode.offsetWidth - 202 + 'px');

Ну и ещё html в CSS.

С такими костылями прокрутка в IE появилась, только выглядит всё, конечно, неправильно.

Будьте джентльменом до конца, объясните, плиз, что эти параметры означают - 100 и 202?

У меня-то ширина макета не в %, а 1000px. А ширина контента 660 px.

(Я просто подозреваю, что мне эти знания понадобятся только на один раз)

UPD. Вот так выглядит ваше решение в моём варианте: http://www.trinity-bridge.221b.ru/index5.htm

Edited April 15, 2009 by Pinguin

Searcher · April 15, 2009

Ну и ещё html в CSS.

Не понял что вы имели ввиду... Может CSS в HTML? Но это не минус, это чтобы вам удобнее было.

*height: expression(parentNode.offsetHeight - 100 + 'px');
*width: expression(parentNode.offsetWidth - 202 + 'px');

IE до 7-го не понимает одновременного указания координат противоположных углов, поэтому высоту и ширину тут приходится указывать для IE до 7-ой версии. Для этого можно воспользоваться условными комментариями.

Поскольку в вашей ситуации ширина фиксированная, то и expression в width можно не использовать, а просто задать жесткую ширину. А вот height для IE вычисляется относительно высоты родительского элемента, это можно понять исходя из названий "parentNode" и "offsetHeight", еще поэкспериментировать можно было бы. Верх и низ дочернего элемента находятся ниже и выше границ родителя. Соответственно, что из высоты родительского элемента нам нужно вычесть, чтобы дочерний элемент не выходил за границы родителя?

Ну и в результате я вам все разжевал и сделал часть работы за вас. Так что теперь с вас доля гонорара за разработку этого сайта.

Pinguin · April 15, 2009

Ура! Сделал. http://www.trinity-bridge.221b.ru/

Там, конечно, ещё есть над чем поработать, но по сабжу вроде разобрались.

Не понял что вы имели ввиду... Может CSS в HTML? Но это не минус, это чтобы вам удобнее было.

Не-не, именно параметр "HTML" в CSS - у меня его не было. Когда поставил - картинка в IE сразу появилась.

Поскольку в вашей ситуации ширина фиксированная, то и expression в width можно не использовать, а просто задать жесткую ширину. А вот height для IE вычисляется относительно высоты родительского элемента, это можно понять исходя из названий "parentNode" и "offsetHeight", еще поэкспериментировать можно было бы. Верх и низ дочернего элемента находятся ниже и выше границ родителя. Соответственно, что из высоты родительского элемента нам нужно вычесть, чтобы дочерний элемент не выходил за границы родителя?
Ну и в результате я вам все разжевал и сделал часть работы за вас. Так что теперь с вас доля гонорара за разработку этого сайта.

Ширина хоть и фиксированная, но задать expression для неё пришлось - иначе разъезжалось. Цифру для ширины высчитал аналитически, а вот для высоты высчитать так и не удалось - поставил от фонаря, так и не поняв, что же она означает. Потому я вас и спрашивал, откуда эти цифры берутся.

Большое вам спасибо за помощь! Вот только гонорара и мне не светит - я макет бесплатно взялся делать, из доброго отношения.

Sign In

Нужно растянуть дизайн по вертикали

Question

Pinguin

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

Pinguin

Link to comment

Share on other sites

Pinguin

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Pinguin

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Pinguin

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Pinguin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information