Search the Community
Showing results for tags 'margin процент'.
Found 1 result
-
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.