Jump to content
  • 0

Padding-top и height:100%


Love_silense
 Share

Question

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

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;

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

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

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

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

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

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

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

Edited by Love_silense
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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 by Love_silense
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy