Проблема height 100%

penchukov · February 22, 2012

Проблема в том , что я не могу сделать следующую вещь. На рисунке есть два контейнера в контенте, у которых есть Img repeat-y. По мере увелечения контента они расширяются. Я задал им height: 100%. Логично что они растягиваются до конца окна браузера. Но как мне сделать, чтобы они растягивались до начала блока footer, и в то же время не было полосы прокрутки? и footer не уходил вниз...

Edited February 22, 2012 by penchukov

hedgehog · February 22, 2012

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

В двух словах: футер надо поднимать вверх (например, отрицательным марджином). Иначе получается следуюее:

Высота окна 1000px блока. Высота футера 150px. 1000+150 = 1150, что больше высоты окна.

penchukov · February 22, 2012

На форуме уже достаточно много тем по этому вопросу, смотрите прикрепленные.
В двух словах: футер надо поднимать вверх (например, отрицательным марджином). Иначе получается следуюее:
Высота окна 1000px блока. Высота футера 150px. 1000+150 = 1150, что больше высоты окна.

Пробовал. Футер уходит под эти блоки, они его перекрывают

Задал отрицательный маргин для контента, футер на месте. А контента Img репитится под ним, так как background для футера в формате png, низ прозрачный)

Edited February 22, 2012 by penchukov

ablay2009 · February 22, 2012

Как перекрывают? А вы паддинг задайте для контейнера снизу

penchukov · February 22, 2012

Вот такая ситуация

Switch74 · February 22, 2012

думаю перекрывают они у него по z-index

попробуй для блоков по краям выставить z-index меньше чем у футера и учти, что z-index работает только с position элементами

а img по бокам должны с середины страницы начинаться? или от хэадера?

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

Edited February 22, 2012 by Switch74

penchukov · February 22, 2012

думаю перекрывают они у него по z-index
попробуй для блоков по краям выставить z-index меньше чем у футера и учти, что z-index работает только с position элементами
а img по бокам должны с середины страницы начинаться? или от хэадера?

z-index не при чём.. Нет position у блоков вообще.

С середины. В боковых блоках лежат 2 дива, один сверху в нем Img, следующий блок с background repeat-y height:100; .

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

margin помог для мозилы) опера тихий ужас

Edited February 22, 2012 by penchukov

Switch74 · February 22, 2012

я бы сделал так, но без кода мало что можно угадать


<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}

.body{position:relative;min-height:100%;}
.header{
	position:relative;
	height:50px;
	background:#ddd;
	z-index:2;
	/*удалить*/
	margin:0px 10px 0px 10px;
	}
.footer{
	position:absolute;
	left1:0px;
	right1:0px;
	bottom:0px;
	height:50px;
	background:#ddd;
	z-index:2;
	/*удалить*/
	left:10px;right:10px;
	}
.left{
	position:absolute;
	top:50px;
	left:0px;
	bottom:50px;
	width:50px;
	background:#999;
	}
.right{
	position:absolute;
	top:50px;
	right:0px;
	bottom:50px;
	width:50px;
	background:#999;
	}
.bg{
	position:absolute;
	top:0px;
	left:50px;
	right:50px;
	bottom:0px;
	z-index:0;
	background:#eee;
	}
.content{
	position:relative;
	margin:0px 50px;
	min-height:100%;
	z-index:1;
	}

</style>
</head>
<body>
	<div class="body">
		<div class="header">header</div>
		<div class="bg"></div>
		<div class="content">
			content
		</div>
		<div class="left"></div>
		<div class="right"></div>
		<div class="footer">footer</div>
	</div>
</body>
</html>

а вообще можно копать и копать в этом направлении

penchukov · February 22, 2012

код такой




<div id="block-all">

<div id="header">

<div class="left-img-header">
</div>

<div class="right-img-header">
</div>

<div class="block-header">

<div class="left-img-block-header">
</div>

<div class="consol">

<script src="#"></script>
<ul id="horizontal-multilevel-menu">
<li><a href="/index.php" class="root-item-selected">#</a></li>
<li><a href="" class="root-item">#</a></li>
<li><a href="" class="root-item">#</a></li>
<li><a href="" class="root-item">#</a></li>
<li><a href="" class="root-item">#</a></li>
</ul>
<div class="menu-clear-left"></div>


</div>

<div class="right-img-block-header">
</div>
</div>

</div>

<div id="container">

<!-- column-->
<div class="left-column">
<div class="left-img-content">
<img src="#" height="248" width="35">
</div>

<div class="left-img">
</div>
</div>

<div class="right-column">
<div class="right-img-content">
<img src="#" height="357" width="60">
</div>

<div class="right-img">
</div>
</div>




<div id="content">




<p>
#
</p>


</div><!—content—>
</div>

<div id="footer">

</div>
</div>




html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
body {
margin: 0;
padding: 0;
background: url('#') repeat;

}


#block-all{
margin:0 auto;
width:1000px;
overflow:hidden;}

/*Links*/
a:link {color: #486DAA;}
a:visited{color:#8C9AA8;}
a:active {color: #486DAA;}
a:hover{color:#DD0000;}



#header
{
width:1000px;
float:left;
height:82px;
}

.left-img-header{
background: url('#') left no-repeat;
width:545px;
height:54px;
overflow:hidden;
float:left;
}

.right-img-header{
background: url('#') right no-repeat;
width:454px;
height:54px;
overflow:hidden;
float:left;
}

.block-header{
float:left;
width:1000px;
overflow:hidden;}

.left-img-block-header{
float:left;
background: url('#') left no-repeat;
width:35px;
height:28px;
}

.right-img-block-header{
float:right;
background: url('#') right no-repeat;
width:55px;
height:28px;
}

/*Navigation*/

.consol{
width:910px;
height:28px;
float:left;
overflow:hidden;
background:#ffffff;
}

/*———--content————-*/
#container{
float:left;
width:1000px;
height:100%;
overflow:hidden;
margin-bottom:-240px;
}

#content{
float:left;
width:905px;
overflow:hidden;
background:#ffffff;
height:100%;
}

.left-column{
float:left;
overflow:hidden;
width:35px;
height:100%;
}

.right-column{
float:right;
overflow:hidden;
width:60px;
height:100%;
}

.left-img{
float:left;
width:35px;
height:100%;
background: url('#') right top repeat-y;
}

.right-img{
float:left;
width:60px;
height:100%;
background: url('#') left top repeat-y;
}

.left-img-content{
float:left;
width:35px;
height:248px;
}

.right-img-content{
float:left;
width:60px;
height:357px;
}


/*———— footer —————--*/
#footer{
float:left;
width:1000px;
height:240px;
background: url('#') top no-repeat;
}

Edited February 22, 2012 by penchukov

Switch74 · February 22, 2012

а мой вариант не подходит?

просто float:left;height:100%; оно и будет всегда на 100% по высоте, или добавляй обертку которая будет регулировать размер блоков или делай их абсолютными

hedgehog · February 22, 2012

Маргин помог, но проблема решается если у футера background сплошной, а у меня внизу есть прозрачные места. Получается что контент под футер ложиться, со своим background
margin помог для мозилы) опера тихий ужас

Для футера можно сделать background: #fff url('...'); , т.е. прозрачный фон картинки будет показывать белый фон футера.

В опере эта техника работает. Вы что-то делаете не так.

penchukov · February 22, 2012

Всем большое спасибо.) Решил все позиционировать.

Sign In

Проблема height 100%

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information