Высота и растягивание фона

@Lautes · Регистрация: 05.02.2012

Author24 — интернет-сервис помощи студентам

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

Столкнулся с проблемой вёрстки.
Необходимо получить следующий вид:
Название: 2556028m.jpg
Просмотров: 376

Размер: 3.6 Кб

однако у меня получается такой вид:
Название: 2614399m.jpg
Просмотров: 373

Размер: 3.4 Кб

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

HTML5

<!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>

CSS

*{
        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, то всё становится нормально, то есть полосы не вылазят за футер. Также нужно отметить, что данная проблема проявляется когда мало контента, если его много, то всё ОК. Симуляция: http://jsfiddle.net/nq9v3/ Подскажите в чём проблема?

@Master · 25.03.2012, 03:01

Маленькие скрины ничего не видно

Вот мой код:

HTML5

<!DOCTYPE html>
<html>
<head>
<title> qwerty  </title>
<link  rel="stylesheet"  type="text/css"  href="style.css" 
media="screen" /> 
</head>
 
<body> 
    <header> 
        <h1>Web page</h1> 
        
        <nav>
            <h1>Web page</h1> 
        </nav>
        
    </header> 
    
    
    
    <article>
        <h1>Web page</h1>
    </article>
    
    <aside>
        <h1>Web page</h1>
    </aside>
    
    <aside id="a1">
        <h1>Web page</h1>
    </aside>
    
    </body>
</html>

CSS

body{
    
    width:900px;
    margin:30px auto;
    padding:0;
    }
 
header{
    height:100px;
    background-color:pink; 
    text-align:center;
    margin-bottom: 20px;
    }
    
nav{
    background-color:#ececec; 
    text-align:center;
    position: relative;
    top:20px;
    }   
    
article{
    margin:2px;
    width:200px;
    height: 300px;
    background-color:green; 
    text-align:center;
    float:left;
    }
    
aside{
    margin:2px;
    width:485px;
    height: 400px;
    background-color:blue; 
    text-align:center;
    float:left;
    }
    
#a1{
    margin:2px;
    width:200px;
    height: 450px;
    background-color:red; 
    text-align:center;
    float:left;
    }

Добавлено через 5 минут

	25.03.2012, 03:01

Опции темы