margin-top(margin-bottom) в процентах от высоты родителя

dmitriydrachov · February 7, 2013

Сама проблема отступов в процентах появилась из-за резиновой верстки. Все мы знаем о способах привязки футтера к низу, вот я пользуюсь таким способом:


<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.

dmitriydrachov · February 8, 2013

Я надеялся что, кто-нибудь свежим взглядом, то мне поможет. И в правду стоило отвлечься, а потом по новой посмотреть. Все настолько глупо что аж стыдно.


<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 .

Sign In

margin-top(margin-bottom) в процентах от высоты родителя

Question

dmitriydrachov

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

dmitriydrachov

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information