Проблема с блоком - обвёрткой

yujin11 · October 9, 2011

Добрый день. На принте видно, что основной блок - обвёртка <wrapp> как то странно себя ведет, налазиет на свои дочерние блоки при уменьшении окна, другими словами он не растягивается по высоте дочерних блоков, а вытягивается по высоте экрана. Такого же быть не должно. Как сделать так, что бы у него минимальная высота была не меньше чем суммарная высота его дочерних блоков? Заранее спасибо.

Пример кода HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Test</title>
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <div id="wrapp">
    <div id="header">
      <div id="logo">

      </div>
      <div id="title_wrapp">

      </div>
    </div>
    <div id="print">
      <ul>
        <li>
          <a href="#">Print</a>
        </li>
        <li>
          <a href="#">Mail</a>
        </li>
      </ul>
    </div>
    <div id="content_wrapper">
      <div id="left_content">
        <div id="global_sidebar_menu">
          <ul>
            <li>
              <a href="#">HOME</a>
            </li>
            <li>
              <a href="#">HOME</a>
            </li>
            <li>
              <a href="#">HOME</a>
            </li>
            <li>
              <a href="#">HOME</a>
            </li>
            <li>
              <a href="#">HOME</a>
            </li>
            <li>
              <a href="#">HOME</a>
            </li>
          </ul>
        </div>
        <div id="local_sitebar">
        </div>
      </div>
      <div id="main_content">
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
        <p>
          Some Text Some Text Some Text Some Text Some Text Some Text
        </p>
      </div>
      <div class="clear">
      </div>

    </div>

  </div>
  <div id="footer">
  </div>
 </body>
</html>

Пример CSS

*{
line-height:100%;
}
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
min-width:1000px;
font-family:Arial, Helvetica CY, Nimbus Sans L, Sans-serif;
background:grey;
margin:0;
}
.clear{
width:1px;
height:1px;
clear:both;
}
#wrapp, #footer{
margin:0 auto;
}
a{
text-decoration:none;
color:grey;
}
#print ul, #global_sidebar_menu ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#logo, #title_wrapp, #print ul li, #left_content, #main_content{
float:left;
}
#wrapp{
width:1000px;
height:100%;
background:white;
}
/*—-- header —--*/
#header{
width:100%;
height:400px;
background:yellow;
}
#logo{
width:100px;
height:100px;
background:red;
}
#title_wrapp{
width:900px;
height:400px;
background:cyan;
}
/*—-- EOF header —--*/
/*—-- print —--*/
#print{
width:100%;
height:30px;
background:blue;
}
#print ul{
float:right;
}
/*—-- print —--*/
/*—-- content wrapper —--*/
#content_wrapper{
width:100%;
background:red;
padding-bottom:30px;
}
/*—-- left sidebar —--*/
#left_content{
width:200px;
background:yellow;
}
#local_sitebar{
padding:5px 15px;
width:170px;
background:red;
}
/*—-- EOF left sidebar —--*/
/*—-- main content —--*/
#main_content{
width:600px;
background:cyan;
}
/*—-- EOF main content —--*/
/*—-- footer —--*/
#footer{
margin-top:-40px;
height:40px;
width:1000px;
background:#000;
}

MC WEST · October 9, 2011

Попробуйте добавить #wrapp clearfix.

И небольшой совет: используйте этот clearfix - h5bp.com/q

Sign In

Проблема с блоком - обвёрткой

Question

yujin11

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

MC WEST

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information