Protey
-
Posts
6 -
Joined
-
Last visited
Protey's Achievements
Explorer (1/14)
0
Reputation
-
В принципе можно но это уже не универсальное решение.
-
А если использовать 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
-
А если использовать 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; }
-
Как сказано, именно зачистка и не даст растянуть на 100% высоту ваш макет. Потому ищем другие решения, где зачистки float-блоков нет в принципе. Зачистку убирал давал контейнеру middle slidebar и content высоту 100% резульат не менялся!
-
С чисткой потока вопросв нет. Остальное не зачет! Суть вопроса в другом: Имеем контейнер высотой 100% в верх контейнера положили шапку вниз футер как в средину положить контейнер который займет оставшееся пространство. Вот как выглядит оригинал шаблона http://proteys.info/works/html5/index.html голубенький и белые блоки надо растянуть до подвала.
-
Стандартный шаблон общий контейнер, шапка, середина(в середине два блока слайдбар и контент) ну и футер. Общий контейнер 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>