Search the Community
Showing results for tags 'растянуть контент до футера'.
Found 1 result
-
Здрасьте. Только не бросайте сразу камнями. Читала, думала, три дня пыхчу и все никак. С дивами в первые столкнулась (помогаю папе в создании сайта). В общем есть трехколоночный макет, с шапкой (хэдером) и подвалом (футером). вот сам макет http://gorodtaxi.com/index11.html(убрала все наполнение, чтобы было проще). Теперь рассказываю что есть: 1. шапка - фиксированная высота, размещена в основном контейнере. 2. контейнер: структура - сайдбар 1, контент, сайдбар 2. все три колонки помещены в контейнер 1, 2 и 3, для того чтобы все вместе растягивались по содержимому наиболее наполненной колонки. 4. в контейнере перед футером стоит распорка clearfloat, чтобы ничто никуда не наезжала. 3. футер фиксированной ширины, вынесен за пределы контейнера прижат книзу путем {position: absolute; bottom:0;} Долго промучалась с футером как его прилепить книзу, а после наполнения содержанием никуда не наезжал, а смещался за содержимым, за 2 дня разобралась. Теперь основная проблема как растянуть контейнер до футера при малом содержании, решение своей проблемы никак не могу найти, что куда впихнуть не понимаю. Может кто сжалобится и подскажет. Не знаю, насколько подробно и понятно описала Код страницы: <body><div class="container"> <div id="header"> <!-- end .header --></div> <div class="container3"> <div class="container2"> <div class="container1"> <div class="sidebar1"> <div class="menu"> <div class="menuins"> <a href="" title="О компании" alt="О компании">О компании</a> <!-- end .menuins --></div> <!-- end .menu --></div> <!-- end .sidebar1 --></div> <div class="content"> <div class="content_ves"> <h1>Инструкции</h1> <!-- end .content_ves --></div> <!-- end .content_black --></div> <div class="sidebar2"> <!-- end .sidebar2 --></div><!-- end .container1 --></div><!-- end .container2 --></div><!-- end .container3 --></div><div class="clearfloat"></div><!-- end .container --></div><div id="footer"></div></body>А это сss: @charset "utf-8";body, html { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #000; margin: 0; padding: 0;}html { height:100%;}body { height: auto !important; height: 100%; min-height: 100%; position: relative; } .container { width: 100%; max-width: 1480px; min-width: 780px; margin: 0 auto; height:auto !important; height:100%; min-height:100%; position:relative; padding-bottom: 112px;}#header { height: 178px; width: 100%; background:#0F0;}.container3 { float:left; width:100%; background: #000; position:relative; overflow:hidden; background: url(image/images/fon_left.png);}.container2 { float:left; width:100%; background: #000; position:relative; right:20%; }.container1 { float:left; width:100%; position:relative; right:60%; background-image: url(image/images/fon_left.png);}.sidebar1 { float: left; width: 20%; position: relative; left: 80%; overflow:hidden;}.menu { margin: 15px 20px 0px 15px;}.menuins { background-color:#000000;}.content { padding: 10px 0; background: #FC0; width: 58%; float: left; position:relative; left:80%; overflow:hidden; margin-left: 1%; margin-right: 1%; margin-top: 10px; margin-bottom:10px; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-box-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px; padding-bottom:112px;}.content_ves { background: #FFC; width: 98%; float: left; margin: 10px 1% 10px 1%; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-box-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px;}.sidebar2 { float: left; width: 20%; position:relative; left:80%; background: url(image/images/fon_left.png); padding: 10px 0;}.clearfloat { clear:both; height:112px; font-size: 1px; line-height: 0px;}#footer { position: absolute; bottom:0; height: 112px; width: 100%; background: #60F; background-position: top left; background-repeat: repeat-x;}Очень прошу помощи. сама никак не справляюсь. Конечно я понимаю что в меня сейчас полетят тапки, но самостоятельно я не смогла разобраться именно с этим: как дотянуть контейнер до футера при недостаточном объеме информации.