Body не растягивается на всю страницу!

SnowWind · May 10, 2011

Здравствуйте товарищи, своё первое сообщение, как водится на подобных форумах, начну с вопроса, который мучает меня уже 2 недели

Никак не могу добиться что бы BODY растягивался в зависимости от содержимого страницы.

Привожу 3 наглядных примера вида окна браузера в разрешении экрана монитора 1152x864(оранжевый бордер - граница html, красный - body)

Тут как бы всё нормально выглядит

А если прокрутить чуть ниже...

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

А теперь сбросим масштаб

Тут уж вообще ужас

HTML

<body>

  <div class="conteyner">

  <div class="fon">
  <div class="fon2">  
  <div class="green"> 

  <div class="name"><img src="/templates/zabdom/images/site_name.png"></div>
  <div class="logo"><img src="/templates/zabdom/images/zabdom_logo.png" alt="Забайкальский дом"></div>
  <div class="doska_menu"><div class="menu"></div></div>

  <div class="content">
  <div class="content_fon_round_left-top"></div>
  <div class="content_fon_center_top"></div>
  <div class="content_fon_round_right-top"></div> 
  <div class="content_fon_left"></div>
  <div class="content_fon_center">     
  </div>
  <div class="content_fon_right"></div>
  <div class="content_fon_round_left-bottom"></div>
  <div class="content_fon_center_bottom"></div>
  <div class="content_fon_round_right-bottom"></div>
  </div>  
  </div>

  </div>
  </div>
  </div>
  </body>

CSS

html {
margin-top:0px;
margin-bottom:0px;
width: 100%;
height: 100%;
border: 10px solid orange;
}

body {
margin-top:0px;
margin-bottom:0px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 10px solid red;
}


div.conteyner {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
position: relative;
background-color:green;
background-repeat:repeat;
border: 10px solid green;
}



div.fon {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-image:url(../images/fon2.jpg);
background-repeat:repeat;
}

div.fon2 {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-image:url(../images/fon.png);
background-repeat:repeat;
}

div.green {
height: 100%;
width: 1200px;
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom:0px;

}

div.name {
width: 700px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
}

div.logo {
width:1024px;
height:768px;
margin-top:20px;
margin-left: auto;
margin-right: auto;
overflow:visible;
}

div.doska_menu {
width:400px;
height:400px;
margin-top: 10px;
margin-left: 0px;
padding: 0px;
float:left;
background-image:url(../images/doska_menu.png);
background-repeat:no-repeat;
}

div.menu {
margin-top:70px; 
padding: 0px; 
font: normal 30px Monotype Corsiva;
color: 1e72be;
}

div.content {
width:800px;
height:90%;
margin-left:400px;
margin-top:10px;
}

Вроде бы оставил всё самое главное, очень надеюсь на вашу помощь

Edited May 10, 2011 by SnowWind

mishka · May 10, 2011

убери с html, body, .conteyner { height: 100% }, что ты хочешь этим достичь?

РАзобрался я что ты хочешь там достичь.

Ты всем блокам задал высоту 100% - тоесть по высоте окна браузера, вот и результат.

Выложи это все гденить в инет, там и посмотрим как сверстать такое.

SnowWind · May 10, 2011

ну я везде убираю 100% в результате граница html занимает ВСЁ пространство и body немного понижается, но висит почти так же как на рисунке.

Посмотреть можно на zabdom.ru

Edited May 10, 2011 by SnowWind

mishka · May 10, 2011

Посмотреть можно на zabdom.ru

В данный момент там пустая страничка

Быколай · May 10, 2011

внимание, оффтоп!

Гугл, как бы прозрачно намекает:

Возможно, вы имели в виду: container

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

mishka · May 10, 2011

как по мне, тут общий лаяут проще табличкой набросать, или display: table; для нормальных браузеров и експрешн или скрипт для ие < 8

SnowWind · May 11, 2011

Да хотя бы что бы ФФ и Опра норм отображали приисходном масштабе

SnowWind · May 11, 2011

Что всё, варианты кончились? Вот так никто и не может мне ничего толком объяснить и подсказать :-(

Sign In

Body не растягивается на всю страницу!

Question

SnowWind

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

mishka

Link to comment

Share on other sites

SnowWind

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

SnowWind

Link to comment

Share on other sites

SnowWind

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information