Растянуть трехколоночный макет на высоту экрана с минимальным содержанием до прижатого вниз к футеру

Valkyrja · March 15, 2015

Здрасьте. Только не бросайте сразу камнями. Читала, думала, три дня пыхчу и все никак. С дивами в первые столкнулась (помогаю папе в создании сайта).

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

вот сам макет 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;}

Очень прошу помощи. сама никак не справляюсь. Конечно я понимаю что в меня сейчас полетят тапки, но самостоятельно я не смогла разобраться именно с этим: как дотянуть контейнер до футера при недостаточном объеме информации.

mrnobody · March 15, 2015

Эмуляция таблицы: http://jsbin.com/nevapi/1/edit?html,css,output

Флексбокс: http://jsbin.com/silona/2/edit

Edited March 15, 2015 by mrnobody

Valkyrja · March 17, 2015

Эмуляция таблицы: http://jsbin.com/nevapi/1/edit?html,css,output

Флексбокс: http://jsbin.com/silona/2/edit

Не могли бы вы нубы еще разъяснить немного: про эмуляцию я теоретически поняла, мне необходимо мой макет загнать в таблицу, весь макет должен быть в одной таблице, а шапка, подвал и контент - это отдельные ее строки и столбцы, или лучше с учетом нагроможденности макета сделать контент тоже как таблицу?

а флексбокс - это что за зверь? это наверное типа "хаки" (или как это там правильно называется) для разных браузеров я правильно поняла?

вот более подробный макет - может направите как лучше сделать? http://gorodtaxi.com/index14.html

Edited March 17, 2015 by Valkyrja

mrnobody · March 18, 2015

Страница не найдена

Sign In

Растянуть трехколоночный макет на высоту экрана с минимальным содержанием до прижатого вниз к футеру

Question

Valkyrja

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

Valkyrja

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information