crazygangster77
-
Posts
1 -
Joined
-
Last visited
crazygangster77's Achievements
Explorer (1/14)
0
Reputation
-
Не растягивается блок с контентом при указании min-height: 100%
crazygangster77 posted a question in HTML Coding
Добрый день. Проблема в том, что нужно растягивать основной блок на всю ширину экрана, чтобы не появлялся скролл, когда контента мало и он не раздвигает основной блок. Это не заметно на маленьких мониторах, контент всегда прибит к низу. сегодня поставил 30 дюймовый моник и увидел такую картину скриншот футтер прибит к низу но вот контентная часть не хочет раздвигаться при указании height:100%. код шаблона: <!DOCTYPE html> <html> <head> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section> <!--Хедер--> <header> </header> <!--/Хедер--> <!--Контент--> <div id="main"> <div class="main-body"> <!--Левая колонка--> <nav> <div class="navigation"> </div> </nav> <!--/Конец Левой колонки--> <div id="contents"> <!--текст--> <div class="main_text"> </div> <!--/текст--> </div> <!--Правая колонка--> <figure> <div class="navigation"> </div> </figure> <!--Конец правой колонки--> </div> </div> <div id="sidebar"> </div> </section> <!--/Конец Контента--> <!--Подвал--> <footer> <div class="copy"> </div> </footer> </body> </html> Стили css: *{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } article, section, header, footer, nav, time, figure { display: block; } div,span,p,a,font,ul,li{ margin:0px; padding:0px; outline:none; font-size:100%; vertical-align:baseline; background:transparent; list-style:none; } body, html{ height: 100%; margin:0px; padding:0px; } * html section { /* хак для ie6 */ height: 100%; /* для ие6, т.к. не понимает min-height */ } section{ width: 1280px; min-height:100%; margin: 0px auto; position: relative; text-align:center; z-index: 1; } header{ position: relative; width: 1280px; height: 150px; } #main { overflow:hidden; position: relative; width:1280px; text-align: left; border-radius:25px; background-color:#957D8C; height:100%; } .main-body{ overflow:hidden; width:1264px; background-color:#FFF; border-radius:17px; margin:8px; position: relative; height:100%; } nav { position: relative; width: 240px; float:left; margin: 10px 0px 10px 10px; z-index: 80; } #contents { width: 764px; padding:0px 10px; position:relative; float:left; } .main_text { width: 740px; margin:10px auto; line-height:1.5em; font-size: 1.0em; } figure { width: 240px; float:left; position:relative; margin: 10px 10px 10px 0px; } #sidebar { height: 35px; clear:both; width: 1280px; position: relative; } footer { height: 30px; width: 1280px; margin:0 auto; margin-top:-30px; position: relative; } Сайт где можно посмотреть 7detei.ru Подскажите Пожалуйста что не так делаю?