relative position - не работает процентное смещение + вопрос про высоту html и body
Вложений: 1
Здравствуйте, Уважаемые.
Лично я использую FF для просмотра этих вопросов как один из браузеров, которому можно больше всего доверять в плане соответствия стандартам. При абсолютном и релативном позиционировании указание любого из смещения, top например, может быть либо в пикселях, либо в процентах. При указании в пикселях происходит смещение на данное растояние от родительского окна. Вопрос 1. Это происходит от окна браузера, html или body? При указании в процентах происходит то же смещение, что и в случае с px, но на расстояние выраженное в процентах от размера смещаемого блока, например для top:20% это будет 0.2 * высоту блока. Во всяком случае так сообщает справка(читаем абзац начинающийся с жирного "Возможны отрицательные координаты"). Вопрос 2.1. Какое смещение имеется ввиду при записи top:0, пиксельное или процентное? Вопрос 2.2. В моем примере процентное смещение вообще не работает, почему? (привожу код здесь и готовый пример в архиве) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>тест</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--————————————————————————css————————————————————————-->
<style>
/*————————————————————————reset————————————————————————*/
* {margin:0; padding:0;}
img, fieldset, input{border:0;}
ul,ol{list-style:none;}
a{outline:none;}
/*————————————————————————wraps————————————————————————*/
/* только при height:100% у обоих корневых боксов они будут занимать высоту страницы */
html{border: 5px solid #fc00ff; height: 100%;} /* pink */
body{background:#838383; border: 5px solid #2c2c2c; float:left; width:100%; height: 100%;} /* black */
#wrapper{border: 5px solid #00d8ff; overflow: hidden; min-height: 100%; position: relative;} /* blue */
#footer{height: 100px; border: 2px solid #c29929; top: 30%; position: relative;} /* yellow */
</style>
<!--————————————————————————js—————————————————————————-->
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<body>
<div id="wrapper">
<div id="footer"></div>
</div>
</body>
</html>
Вопрос 3. (на примере того же кода, что и в вопросе 2). Разное поведение высоты элементов внутри body с min-height:100% и height:100%. Если мы запишем так: html{height:100%} body{min-height:100%} wrapper{min-height:100%}, то body займет всю высоту окна, а wrapper проигнорирует cвой min-height:100%. Если же body зададим явную высоту height:100%, то высоту окна займет и wrapper. Почему если у body min-height:100%, а не height:100%, то wrapper c height:100% или min-height:100% не занимает всю высоту body(до конца окна) |
Цитата:
Deff - ты унылое гавно! |
при position:fixed идет расчет относительно viewport, при :relative относительно первоначального положения (уже объяснили), при :absolute - относительно ближайшего предка, имеющего position не равный :static. Если таковых нет, то наверно от html
2.1 Нулевое значение рекомендуется указывать без единиц значения. Оно и понятно - зачем, когда при любой единице результирующее значение один фиг нулевое? 3. А где вопрос? |
Magneto, вы процитировали мой первый вопрос с примесью своего предыдущего ответа(он попал в цитату, да еще и с орф-ошибками, не дотерли видно).
Кстати в первом вопросе почему не работает процентное смещение, так и никто не ответил, непорядок. :) Один товарищ говорит, что это потому что у родителя min-height:100% - это не жёсткое задание высоты, а всего лишь ограничение на минимум. И браузер при этом не хочет ничего там расчитывать в процентах. danik.js Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
http://www.w3.org/TR/CSS2/visuren.html#propdef-top |
danik.js +1
|
Цитата:
и можно совмещать тогда min-height и height тогда? чтобы он как бы читал что height (для min-height), но на самом деле было min-height? и еще вот такой пример <html>
<head>
<style type="text/css">
* {margin:0; padding:0;}
html {height:100%; }
body {height:100%; background:yellow;}
#wrap {min-height:100%; background:red;}
#car {height:60%; background:purple;}
#text {height:40%; background:gray;}
</style>
</head>
<body>
<div id="wrap">
<div id="car">
s
</div>
<div id="text">
s<br>s<br>
s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
</div>
</body>
</html>
почему wrapper не тянется на min-height 100%, ведь у body и html 100%, он тянется на 100% |
wrapper тянется (учись пользоваться отладчиком браузера). А вот car и text не тянутся, потому что у wrapper'а не задана высота (да, min-height задан, но это совсем другое). Читай внимательней посты выше.
|
Цитата:
p.s отладчик показывает что wrapper вытянут на 100%, а не на min-height 100%. google chrome 28.01.1500 |
Цитата:
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Ну я так понял растянуть min-height блок с вложенными height блоками невозможно? нет идей?
|
Цитата:
|
Цитата:
Есть такая "волшебная" конструкция (<!--[if gte IE6])^ Код:
html{P.S. Из особенностей: 1) обязательно проставить 100% height для <html> - иначе <body> его не преодолеет. 2) min-height:100% для <body> - чтобы он всегда растягивался на всю высоту документа. 3) порядок следования правил для body очень важен, иначе будет некроссбраузерно! |
IE6? Это шутка?
|
| Часовой пояс GMT +3, время: 16:48. |