«Растянуть» фоновое изображение внутри div - высота 100% - PullRequest
Новая
       14

«Растянуть» фоновое изображение внутри div - высота 100%

0 голосов
/ 03 марта 2012

В настоящее время у меня есть макет из двух столбцов с верхним и нижним колонтитулами, два столбца - это два DIV, которые плавают и затем очищаются. Моя цель - создать фон позади двух DIV и растянуть его на «100%» до нижнего колонтитула страницы.

У меня есть два DIV (левый и правый контент), и у меня есть еще один DIV, окружающий эти два div (держателя контента), вот что будет содержать мое фоновое изображение. В настоящее время он расширяется, пока у меня есть содержимое в двух плавающих DIV.

Мой текущий код CSS выглядит следующим образом: 

* { 
  margin: 0; 
  padding: 0; 
} 

html, body, #wrap { 
  height: 100%;
} 

body > #wrap { 
  height: auto; 
  min-height: 100%; 
} 

#container { 
  width: 1500px;
  min-height: 100%; 
  margin: auto; 
} 

#header { 
  overflow: hidden; 
  background-color: red; 
  height: 100px; 
} 

#contentholder { 
  background-color: #FFE303; 
  min-height: 100%; 
} 

#contentleft { 
  float: left; 
  width: 18.7%;
  padding-left: 10px; 
  padding-right: 10px; 
  background-color:  #698B22; 
} 

#contentright { 
  float: left;
  width: 80%; 
  background-color: #964514;
} 

.clear { 
  clear: both; 
} 

#footer { 
  position: relative; 
  margin-top: -60px; /* same as height */ 
  height: 60px;  /* same as padding-bottom and margin-top */ 
  clear: both; 
  background-color: pink; 
} 

#contentmain { 
  padding-bottom: 60px; /* must be the same height as footer */ 
}

И мой HTML-код: 

<div id="wrap"> 

<div id="container"> 

    <div id="header"></div><!--end header--> 

    <div id="contentmain"> 

        <div id="contentholder"> 

    <div id="contentleft"></div><!--contentleft--> 

    <div id="contentright"></div><!--contentright-->

    <div class="clear"></div><!--clear-->   

    </div><!--content main-->
        </div><!--content holder-->     

</div><!--container--> 

</div>

    <div id="footer"></div><!--footer-->

Я уже пытался использовать min-height: 100% и height: auto в contentholder DIV, но это не сработало правильно.

Ответы [ 2 ]

1 голос
/ 03 марта 2012

Создайте эти 2 селектора: 

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display:block;
}

, а затем добавьте класс .clearfix к контейнеру, по которому вы хотите запустить страницу.

Вы также можете использовать: 

overflow: hidden;

, если это не будет мешать другим функциям сайта.

0 голосов
/ 03 марта 2012

Этот стиль исправления, который я нашел, работал хорошо, и он короче:

http://nicolasgallagher.com/micro-clearfix-hack/

И я верю, что эта статья о поддельных столбцах поможет вам в разработке фоновых столбцов:

http://www.alistapart.com/articles/fauxcolumns/

Надеюсь, это поможет,

Ура! * * 1013

...