Проблема с высотой

param · March 21, 2012

Здравствуйте.

Столкнулся с проблемой вёрстки.

Необходимо получить следующий вид: ,

однако у меня получается такой вид:

Привожу код страницы:

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<div id="wrapper">

	<header id="header">
	   <div>Заголовок</div>
           <nav id="hor_menu">
        	Меню
           </nav>
        </header> 

	<section id="middle">
    	<div id="container">
        	<div id="content">

		</div>
	</div>

        <aside id="sideLeft">
            <nav id="ver_menu">
            	Меню
            </nav>
	</aside>

	<aside id="sideRight">

	</aside> 	

	</section>



</div><!-- #wrapper -->

        <footer id="footer">
	Нижнее меню
        </footer>

</body>
</html>


*{
	margin:0;
	padding:0;
}
html, body{
	height:100%;
	background:#fff;
}
header, nav, section, article, aside, footer {
	display:block;
}
body{
    font:16px/18px Arial, Tahoma, Verdana, sans-serif;
    width:100%;
}
#wrapper{    
    width:1002px; 
    margin:0 auto;
    height:100%;
}

/*Header*/

#header{
	height:155px;
	position:relative;
	border:1px solid #b4b0b0;
	border-bottom:none;	
}
/*Middle*/

#middle{   
        min-height:100%;
	background:url(../images/all.jpg) repeat-y;
	border-left:1px solid #b4b0b0;
	border-right:1px solid #b4b0b0;
}
#middle:after{    
    content:'.';
    display:block;
    clear:both;
    visibility:hidden;
    height:0;
}
#container{
    width:100%;
    float:left;
    margin-top:53px;
}
#content{
    position:relative;
    padding:0 270px 0 210px;
}
#sideLeft{
    float:left;
    width:199px; 
    margin-left:-100%;
    position:relative;
    margin-top:53px;
}
#sideRight{
    float:left;
    margin:0 -3px 0 -258px; 
    width:261px; 
    position:relative;
    margin-top:53px;
}
/*Footer*/

#footer{
    padding-top:15px;
    width:1000px;
    margin:-45px auto 0;
    height:30px;
    position:relative;
    overflow:hidden;
    background:#fff;
    clear:both;
    border:1px solid #b4b0b0;
    border-bottom:none;
}

При этом если #middle поставить margin-top, например 445px, то всё становится нормально, то есть полосы не вылазят за футер. Также нужно отметить, что данная проблема проявляется когда мало контента, если его много, то всё ОК. Подскажите в чём проблема!

Edited March 21, 2012 by param

wildhind · March 22, 2012

у меня ряд вопросов:

— почему у #wrapper height: 100%, а не min-height: 100%, как должно быть? (кстати, если сделать так, то поведение ожидаемо корректное в любом случае);

— зачем такое безумное количество обёрток?

— что помешало показать работающий пример на http://jsfiddle.net/?

param · March 22, 2012

1) в таком случае полоски не тянуться к низу страницы

2) http://jsfiddle.net/nq9v3/

param · March 24, 2012

Некто не сталкивался с подобной ситуацией?

NeoXidizer · March 24, 2012

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

Edited March 24, 2012 by NeoXidizer

param · March 24, 2012

Вот так я подкрасил футер: http://jsfiddle.net/nq9v3/2 он прижимается к низу страницы, соответственно полоски идущие фоном в #middle, должны не вылазить ниже футера, а заканчиваться на нём, как показано на первой картинке.

alexandr_v-vich · March 24, 2012

#middle{

min-height:100%;

background:url(http://savepic.net/2580459.jpg) repeat-y;

border-left:1px solid #b4b0b0;

border-right:1px solid #b4b0b0;

float: left;

}

Edited March 24, 2012 by alexandr_v-vich

param · March 24, 2012

Спасибо большое, работает!

Хотя конечно я бы некогда не догадался, что дело в потоке элементов, может поясните пожалуйста, почему именно так влияет float:left?

Edited March 24, 2012 by param

Sign In

Проблема с высотой

Question

param

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

wildhind

Link to comment

Share on other sites

param

Link to comment

Share on other sites

param

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

param

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

param

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information