Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.06.2013, 23:17
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

relative position - не работает процентное смещение + вопрос про высоту html и body
Здравствуйте, Уважаемые.

Лично я использую 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(до конца окна)
Вложения:
Тип файла: zip positioning_per_percents_and_what_is_0.zip (38.9 Кб, 1 просмотров)

Последний раз редактировалось lancer, 01.07.2013 в 01:57.
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2013, 02:37
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

Сообщение от Deff
Сообщение от lancer
Вопрос 1. Это происходит от окна браузера, html или body?
Для top и left при элементах с position:relative отступы от body, если в родителя нет элементов с позицией абсолюте или relative или fixed,
В противном случае - позиционируется от первого, ближайшего родственника с такой позицией
Это ошибочное утверждение, так как при position: relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

Deff - ты унылое гавно!

Последний раз редактировалось Magneto, 01.07.2013 в 10:41.
Ответить с цитированием
  #3 (permalink)  
Старый 30.06.2013, 06:34
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

при position:fixed идет расчет относительно viewport, при :relative относительно первоначального положения (уже объяснили), при :absolute - относительно ближайшего предка, имеющего position не равный :static. Если таковых нет, то наверно от html

2.1 Нулевое значение рекомендуется указывать без единиц значения. Оно и понятно - зачем, когда при любой единице результирующее значение один фиг нулевое?

3. А где вопрос?
Ответить с цитированием
  #4 (permalink)  
Старый 01.07.2013, 02:02
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

Magneto, вы процитировали мой первый вопрос с примесью своего предыдущего ответа(он попал в цитату, да еще и с орф-ошибками, не дотерли видно).

Кстати в первом вопросе почему не работает процентное смещение, так и никто не ответил, непорядок.
Один товарищ говорит, что это потому что у родителя min-height:100% - это не жёсткое задание высоты, а всего лишь ограничение на минимум. И браузер при этом не хочет ничего там расчитывать в процентах.

danik.js
Цитата:
при position:fixed идет расчет относительно viewport, при :relative относительно первоначального положения (уже объяснили), при :absolute - относительно ближайшего предка, имеющего position не равный :static. Если таковых нет, то наверно от html
В одном источнике прочел, что относительно DocumentElement. Не body точно, либо html, либо само окно браузера.

Цитата:
2.1 Нулевое значение рекомендуется указывать без единиц значения. Оно и понятно - зачем, когда при любой единице результирующее значение один фиг нулевое?
Действительно, там разницы не будет.

Цитата:
3. А где вопрос?
Отредактировал, теперь вопрос есть. По тому же утверждению товарища height в процентах у элемента в родителе с min-height не сработает. Все процентное в таком родительском блоке не работает.

Последний раз редактировалось lancer, 01.07.2013 в 02:26.
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2013, 04:36
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от lancer
Почему если у body min-height:100%, а не height:100%, то wrapper c height:100% или min-height:100% не занимает всю высоту body(до конца окна)
Потому-что если у родителя не указано свойство height (то есть равно auto), то высота дочерних блоков, заданная в процентах (и другие процентные свойства, рассчитываемые относительно высоты контейнера) игнорируется. http://www.w3.org/TR/CSS2/visudet.ht...eight-property

Сообщение от lancer
Вопрос 2.2. В моем примере процентное смещение вообще не работает, почему?
Потому что процентные значения top/left/right/bottom должны рассчитываться относительно высоты родителя. А у тебя она не задана.
http://www.w3.org/TR/CSS2/visuren.html#propdef-top
Ответить с цитированием
  #6 (permalink)  
Старый 01.07.2013, 06:11
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

danik.js +1
Ответить с цитированием
  #7 (permalink)  
Старый 04.08.2013, 16:09
Новичок на форуме
Отправить личное сообщение для myaut Посмотреть профиль Найти все сообщения от myaut
 
Регистрация: 22.11.2012
Сообщений: 9

Сообщение от danik.js Посмотреть сообщение
Потому-что если у родителя не указано свойство height (то есть равно auto), то высота дочерних блоков, заданная в процентах (и другие процентные свойства, рассчитываемые относительно высоты контейнера) игнорируется. http://www.w3.org/TR/CSS2/visudet.ht...eight-property


Потому что процентные значения top/left/right/bottom должны рассчитываться относительно высоты родителя. А у тебя она не задана.
http://www.w3.org/TR/CSS2/visuren.html#propdef-top
выходит min-height 100% не значит, что height 100%? надо обязательно жестко задавать?
и можно совмещать тогда 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%

Последний раз редактировалось myaut, 04.08.2013 в 16:19. Причина: недописал
Ответить с цитированием
  #8 (permalink)  
Старый 04.08.2013, 16:56
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

wrapper тянется (учись пользоваться отладчиком браузера). А вот car и text не тянутся, потому что у wrapper'а не задана высота (да, min-height задан, но это совсем другое). Читай внимательней посты выше.
Ответить с цитированием
  #9 (permalink)  
Старый 04.08.2013, 17:21
Новичок на форуме
Отправить личное сообщение для myaut Посмотреть профиль Найти все сообщения от myaut
 
Регистрация: 22.11.2012
Сообщений: 9

Сообщение от danik.js Посмотреть сообщение
wrapper тянется (учись пользоваться отладчиком браузера). А вот car и text не тянутся, потому что у wrapper'а не задана высота (да, min-height задан, но это совсем другое). Читай внимательней посты выше.
Так как растянуть car и text при этом сохранив min-height у wrapper? без js никак? и если это можно сделать с помощью js если не трудно подскажите как, если лень, то хотя бы скажите можно ли
p.s отладчик показывает что wrapper вытянут на 100%, а не на min-height 100%. google chrome 28.01.1500
Ответить с цитированием
  #10 (permalink)  
Старый 04.08.2013, 17:50
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от myaut
отладчик показывает что wrapper вытянут на 100%, а не на min-height 100%
Ну все верно. 100% - это и есть минимум (min-height).
Сообщение от myaut
ак как растянуть car и text при этом сохранив min-height у wrapper?
Пропиши wrapper'у height:100% , или тебе это не подходит?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35