Растянуть блоки по высоте средствами css

Protey · March 23, 2012

Стандартный шаблон общий контейнер, шапка, середина(в середине два блока слайдбар и контент) ну и футер.

Общий контейнер wrapper растянут по высоте 100% (html & body естесвенно высотой 100%), внутри контейнера #wrapper шапка #header сайта фиксированной высоты,

ниже контейнер середины сайта #middle для размещения блока сладйбара и блока для контента. Футер прижат к низу сайта стандартными средствами.

Проблема:

При малом наполнеии слайдбара #sidebar и контента #content которые имеют свои бэграунды получается дыра до футера.

Вопрос:

вообще возможно растянуть блоки слайдбара и контента до футера средстваи css?

P.S. Табличную весртку не предлагать, JS тоже. Выравнивать блоки слайдбара и контента по высоте я умею.

Интернет перепахан решения не нашел! Спасибо всем кто откликнется и реально поможет.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	height: 100%;
	background-color:#999;
}

#wrapper {
	width: 960px;
	margin:0 auto;
	min-width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background:#CCCCCC;
}


#header {
	height: 100px;
	background-color:#069;
}

#middle {
	width: 100%;
	padding: 0 0 80px;
	height: 1%;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

#sidebar{
	width:220px;
	background-color:#d3e8ed;
	margin:0 10px;
	float:left;
	height:100%;
}

#content {
	width:700px;
	background-color:#fff;
	margin:0 10px;
	float:left;
	height:100%;
}

#footer {
	margin: -80px auto 0;
	width: 960px;
	height: 80px;
	background-color:#333333;
}

</style>

</head>

<body>
<!-- # контейнер 100% высоты 960пикс ширины-->
<div id="wrapper">
   	<!-- # Шапка сайта -->
        <div id="header">
        	<div style="padding-top:20px;; color:#FFFFFF; text-align:center">Header 960 grid 12col</div>
        </div>
    <!-- # //Шапка сайта -->

    <!-- # Контейнер середины сайта -->
    <div id="middle">

        <!-- # Контейнер сайдбара -->
         <div id="sidebar">
           <div style="padding-top:20px;text-align:center">Sidebar 960 grid 3col</div>
         </div>
        <!-- # //Контейнер сайдбара -->

    	<!-- # Контейнер основного контента -->
        <div id="content">
         <div style="padding:20px 0; text-align: center">Content 960 grid 9col</div>
                <p>Sed sed ipsum nulla, a dignissim nulla. Ut cursus imperdiet massa, sed   adipiscing eros tincidunt at. Vestibulum nec metus quis nulla egestas mollis a   quis arcu. <br />
					Nullam ornare malesuada arcu, eget congue dui faucibus nec. Nam sit   amet justo mauris, ut posuere quam. Ut sodales, erat sodales elementum congue,<br />
					magna leo imperdiet 	odio, nec rhoncus purus justo et ipsum. Phasellus varius,   enim sed venenatis tincidunt, metus metus porttitor lectus, sit amet accumsan<br />
					augue enim sed diam.
                 </p>
        	</div>
         <!-- # //Контейнер основного контента -->

    </div>
    <!-- # //Контейнер середины сайта -->
</div>
<!-- #контейнер 100% высоты 960пикс ширины-->

<!-- # подвал прижат к низу страницы 80пикс высоты 960ширины -->
    <div id="footer">
        <div style="padding-top:10px; color:#FFFFFF; text-align:center">Footer 960 grid 12col</div>
    </div>
<!-- # //подвал -->
</body>
</html>

gordi · March 23, 2012

При использовании зачистки float контейнеров

#middle:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
}

растянуть на сто процентную высоту не получится

100% высоту страницы можно получить используя

 margin-bottom:-32767px;padding-bottom:32766px;

Примеры - http://trifler.ru/layoutexamplesfix.htm

Protey · March 23, 2012

При использовании зачистки float контейнеров
#middle:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
}
растянуть на сто процентную высоту не получится
100% высоту страницы можно получить используя
 margin-bottom:-32767px;padding-bottom:32766px;
Примеры - http://trifler.ru/layoutexamplesfix.htm

С чисткой потока вопросв нет. Остальное не зачет! Суть вопроса в другом:

Имеем контейнер высотой 100% в верх контейнера положили шапку вниз футер как в средину положить контейнер который займет оставшееся пространство.

Вот как выглядит оригинал шаблона http://proteys.info/works/html5/index.html голубенький и белые блоки надо растянуть до подвала.

Edited March 23, 2012 by Protey

gordi · March 23, 2012

...Суть вопроса в другом:
Имеем контейнер высотой 100% в верх контейнера положили шапку вниз футер как в средину положить контейнер который займет оставшееся пространство.

Как сказано, именно зачистка и не даст растянуть на 100% высоту ваш макет.

Потому ищем другие решения, где зачистки float-блоков нет в принципе.

Protey · March 23, 2012

...Суть вопроса в другом:
Имеем контейнер высотой 100% в верх контейнера положили шапку вниз футер как в средину положить контейнер который займет оставшееся пространство.
Как сказано, именно зачистка и не даст растянуть на 100% высоту ваш макет.
Потому ищем другие решения, где зачистки float-блоков нет в принципе.

Зачистку убирал давал контейнеру middle slidebar и content высоту 100% резульат не менялся!

gordi · March 23, 2012

Вы можете задавать высоту только


#middle {min-height:100%;}

а с блоками, которые находятся в этом контейнере этот номер не пройдет,

они тянуться не будут и никогда не станут равными по высоте.

Повторю еще раз, надо искать другие решения, на одно из возможных ссылку давал.

Или делаете соответствующую графику для #middle, тогда все получится

Protey · March 24, 2012

Вы можете задавать высоту только
#middle {min-height:100%;}
а с блоками, которые находятся в этом контейнере этот номер не пройдет,
они тянуться не будут и никогда не станут равными по высоте.
Повторю еще раз, надо искать другие решения, на одно из возможных ссылку давал.
Или делаете соответствующую графику для #middle, тогда все получится

А если использовать display:table, display:table-row, display:table-cell- как вариант ?

а как лекарство для IE-7


$(document).ready(function(){   
if ($.browser.msie && $.browser.version == 7)   {
     $(".tablecell").wrap("<td />");
     $(".tablerow").wrap("<tr />");
     $(".table").wrapInner("<table />");  
      }  
}); 

.table     { display: table; } 
.tablerow  { display: table-row; } 
.tablecell { display: table-cell; }

Edited March 24, 2012 by Protey

gordi · March 24, 2012

Вы можете задавать высоту только
#middle {min-height:100%;}
а с блоками, которые находятся в этом контейнере этот номер не пройдет,
они тянуться не будут и никогда не станут равными по высоте.
Повторю еще раз, надо искать другие решения, на одно из возможных ссылку давал.
Или делаете соответствующую графику для #middle, тогда все получится
А если использовать display:table, display:table-row, display:table-cell- как вариант ?
а как лекарство для IE-7
$(document).ready(function(){   
if ($.browser.msie && $.browser.version == 7)   {
     $(".tablecell").wrap("<td />");
     $(".tablerow").wrap("<tr />");
     $(".table").wrapInner("<table />");  
      }  
}); 

.table     { display: table; } 
.tablerow  { display: table-row; } 
.tablecell { display: table-cell; } 

Можно и так, но как тогда быть с "P.S. Табличную весртку не предлагать, JS тоже." из № 1

Protey · March 24, 2012

Вы можете задавать высоту только
#middle {min-height:100%;}
а с блоками, которые находятся в этом контейнере этот номер не пройдет,
они тянуться не будут и никогда не станут равными по высоте.
Повторю еще раз, надо искать другие решения, на одно из возможных ссылку давал.
Или делаете соответствующую графику для #middle, тогда все получится
А если использовать display:table, display:table-row, display:table-cell- как вариант ?
а как лекарство для IE-7
$(document).ready(function(){   
if ($.browser.msie && $.browser.version == 7)   {
     $(".tablecell").wrap("<td />");
     $(".tablerow").wrap("<tr />");
     $(".table").wrapInner("<table />");  
      }  
}); 

.table     { display: table; } 
.tablerow  { display: table-row; } 
.tablecell { display: table-cell; } 
Можно и так, но как тогда быть с "P.S. Табличную весртку не предлагать, JS тоже." из № 1

Попробовал на display: table.... все замечательно опять столкнулся с проблемой остутвует замена colspan. Начинаю осознавать, что от таблицы никуда не деться.

Перехожу на старый безотказынй кросбраузерный вариант: cклет сайта таблица а внутри склета дивы. Симбиоз табличной и блочной верстки - это не грех.

Кто выскажеться иначе?

PS ВОТ результат симбиоза http://proteys.info/works/html5/index.html

Edited March 24, 2012 by Protey

jurassik · March 26, 2012

а почему нельзя объединить фон слева и фон контента в картинку полоской,и задать ее фоном #wrapper

Protey · March 29, 2012

а почему нельзя объединить фон слева и фон контента в картинку полоской,и задать ее фоном #wrapper

В принципе можно но это уже не универсальное решение.

jurassik · March 29, 2012

а почему нельзя объединить фон слева и фон контента в картинку полоской,и задать ее фоном #wrapper
В принципе можно но это уже не универсальное решение.

почему не универсально?

еще можете добавить два блока absolute,top0,bottom0 за левым и центральным блоками, им фоны задать

Sign In

Растянуть блоки по высоте средствами css

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information