Стандартный шаблон общий контейнер, шапка, середина(в середине два блока слайдбар и контент) ну и футер. Общий контейнер 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>
