Padding-top и height:100%

Love_silense · September 3, 2009

есть следующий цсс фаил

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


body
{
	font: 12px/100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0 auto; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	width:1000px;
	position:relative;
}

#height_container
{
background: #999999;
height: 100%; /* для IE6 */
min-height: 100%;
}

#footer, #height_container, #header
{
width:100%;
}


/**html #height_container
{
overflow: visible;
overflow:hidden;
}*/

#header
{
background-color:#33FF00;
height:100px;
z-index:6;
margin:0px auto;
zoom:1;
position:absolute;
left:0;
top:0;
}

#footer
{
background-color:#000099;
margin:-100px auto 0;
height:100px;
position:relative;
zoom:1;
z-index:5;
}


#news_sidebar, #navigation_sidebar, #work_area
{
height:auto;
float:left;
display:inline-block;
text-align:left;
position:relative;
height:100%;
zoom: 1;
z-index:1;
}

*html #news_sidebar, #navigation_sidebar, #work_area
{
display:inline;
zoom:1;
}

#work_area
{
background-color:#FFFFFF;
margin:0 0 0 150px;
width:700px;
}

#news_sidebar
{
width:150px;
background-color:#FFFF00;
}

#navigation_sidebar
{
width:150px;
background-color:#FFFF00;
margin:0 0 0 -850px;
}

и следующая разметка страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="UnizhTemplate.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="header"></div>
<div id="height_container">
  <div id="work_area">mimi</div>
	<div id="navigation_sidebar">mumu</div>
	<div id="news_sidebar">mama</div>
</div>
<div id="footer"></div>

</body>
</html>

Нужно добавить стилям #news_sidebar, #navigation_sidebar, #work_area

свойство padding-top:100px;

каким то таким образом что-бы их высота не увеличилась. Это возможно?

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

Justnewone · September 3, 2009

Внутрь див с маргин-топом.

psywalker · September 3, 2009

Внутрь див с маргин-топом.

а с паддинг-топом ведь тоже возможно?

Love_silense · September 3, 2009

"Не семантично... зато дешево, сердито и практично! "(почти (с))

Сам так сделал некоторое время назад(с паддинг топом, что идентично), но искренне надеюсь что существует решение которое позволит не плодить лишних дивов.

Ещё варианты ?

з.ы. прошу прощения что изначально не до конца сформулировал постановку вопроса.

Edited September 3, 2009 by Love_silense

psywalker · September 3, 2009

у тебя высота ихняя 100%, поэтому ты можешь поэксперементировать с этим делом, например назначь им высоту 94% и отступ верхний 100пк, посмотри что будет, и так пока не подгонишь под задачу. Но боюсь, что с этим делом будут проблемы при разных разрешениях и т. д. Поэтому самое верное использовать вышеприведённые варианты

Love_silense · September 4, 2009

Ну не подгонять же по пипселям под разрешение монитора=)

Выяснил ещё один облом: колонки не "тянуся" по высоте за максимальной.

http://blog.sjinks.org.ua/test/3col/3col_h100.html вот здесь есть пример где они тянутся(проверял) и я в упор не могу понять почему у меня не так.

В фаиле стилей добавил

#height_container

{

background: #999999;

height: auto;

height: 100%; /* для IE6 */

min-height: 100%;

overflow: hidden;

}

до этого футер не опускался и колонки были константные по высоте. Теперь просто не тянется. Вобщем если кто-то сможет расшифровать магию примера - буду благодарен.

Edited September 4, 2009 by Love_silense

psywalker · September 4, 2009

да срань какая то старая, вот тебе мой способ нормальный, везде рабочий и кода меньше в разы:

http://psywalker.ru/Forum/shadow/Untitled-1.html

Love_silense · September 4, 2009

При чем тут это? У тебя одна колонка и футер под ней(причем в 8 опере он даже к низу не прибивается) а мне нужно что-бы все три колонки были с высотой максималоьной колонки

psywalker · September 4, 2009

в опере всё гуд, просто это её баг, надо пошевелить экран или обновить страницу и всё будет ок

Love_silense · September 4, 2009

ну ето был не найезд, ето было к тому что данное решение не подходит=)

Sign In

Padding-top и height:100%

Question

Love_silense

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Love_silense

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Love_silense

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Love_silense

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Love_silense

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information