dmitriydrachov
-
Posts
27 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by dmitriydrachov
-
margin-top(margin-bottom) в процентах от высоты родителя
dmitriydrachov replied to dmitriydrachov's question in HTML Coding
Я надеялся что, кто-нибудь свежим взглядом, то мне поможет. И в правду стоило отвлечься, а потом по новой посмотреть. Все настолько глупо что аж стыдно. <body> <div id="wrapper"> <div id="head"></div> <div id="content" ></div> <div id="footer"></div> </div> </body> И такие стили; * { margin: 0; padding: 0; } html, body, #wrapper { height: 100%; width: 100%; } #head { width: 100%; height: 10%; } #content { width: 100%; height: 80%; } #footer { width: 100%; height: 10%; } Зачем прижимать футтер, если он и так прижимается) Спросите зачем вообще такая резина(тем более по высоте) - просто напросто сайт сделан грубо говоря как картинка с меню и задача была чтобы картинка была полной при любом разрешении( ну конечно без изменения пропорций). А насчет margin думаю что всех вполне устраивает что он процентном берется от ширины (я даже не могу представить ситуацию когда надо от высоты), а вот тот кто Фома не верующий вот ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#value-def-margin-width . -
margin-top(margin-bottom) в процентах от высоты родителя
dmitriydrachov posted a question in HTML Coding
Сама проблема отступов в процентах появилась из-за резиновой верстки. Все мы знаем о способах привязки футтера к низу, вот я пользуюсь таким способом: <body> <div id="wrapper"> <div id="head"></div> <div id="content" ></div> <div class="footer-push"></div> </div> <div id="footer" > </div><!-- footer --> </body> * { margin: 0; padding: 0; } html, body, #wrapper { height: 100%; width: 100%; } #wrapper{ margin-bottom: -100px; } #head { width: 100%; height: 100px; } #content { width: 100%; height: 400px; } .footer-push { width: 100%; height: 100px; } #footer { width: 100%; height: 100px; } Но предположим что высоты у нас в процентах: * { margin: 0; padding: 0; } html, body, #wrapper { height: 100%; width: 100%; } #wrapper{ margin-bottom: -10%; } #head { width: 100%; height: 10%; } #content { width: 100%; height: 80%; } .footer-push { width: 100%; height: 10%; } #footer { width: 100%; height: 10%; } Тут то и таиться дьявол. Предположим размеры холста у нас 1200х1000 (просто ради удобства взял) тогда получается высота шапки у нас 10% от 1000px = 100px, высота контента 80% = 800px и высота подвала 10% = 100px и логично (ну или хотелось бы чтобы так было) высота отрицательного margin была 10% от 1000px = 100px, но увы считает оно не от высоты родителя, а от ширины и у нас получается что отступ равен 10% от 1200px = 120px. Я же думаю что проблему не возможно решить т.к. это особенности браузера (проверял только на последних версиях chrome и firefox), но мало ли может кто-нибудь сталкивался. Хотелось бы решить проблему без использования js.