Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / relative position - не работает процентное смещение + вопрос про высоту html и body / 3 сообщений из 3, страница 1 из 1
29.06.2013, 23:09
    #38314891
lanzer
lanzer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
relative position - не работает процентное смещение + вопрос про высоту html и body
Здравствуйте, Уважаемые.

Лично я использую FF для просмотра этих вопросов как один из браузеров, которому можно больше всего доверять в плане соответствия стандартам.

При абсолютном и релативном позиционировании указание любого из смещения, top например, может быть либо в пикселях, либо в процентах. При указании в пикселях происходит смещение на данное растояние от родительского окна.

Вопрос 1. Это происходит от окна браузера, html или body?
При указании в процентах происходит то же смещение, что и в случае с px, но на расстояние выраженное в процентах от размера смещаемого блока, например для top:20% это будет 0.2 * высоту блока. Во всяком случае так сообщает справка (читаем абзац начинающийся с жирного "Возможны отрицательные координаты").

Вопрос 2.1. Какое смещение имеется ввиду при записи top:0, пиксельное или процентное?
Вопрос 2.2. В моем примере процентное смещение вообще не работает, почему?

(привожу код здесь и готовый пример в архиве)

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
/*————————————————————————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 */



Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<!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————————————————————————-->
<link href="css/base.css" type="text/css" rel="stylesheet" />

<!--————————————————————————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.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.06.2013, 00:45
    #38314923
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
relative position - не работает процентное смещение + вопрос про высоту html и body
lanzer,

1. Относительно DocumentElement (основной элемент документа). Насколько помню - это html.
2.1. А какая разница? 0% != 0px? :)
2.2 min-height - это не жёсткое задание высоты, а всего лишь ограничение на минимум. А соответственно с процентными соотношениями по высоте могут быть проблемы (знаю что высоту блока в процентах в данном случае задать нельзя.. это по стандарту. искать не хочется:) ).
3. Как и было сказано в вопросе "на основании вопроса 2". Так и ответ... На основании ответа 2. Height - чёткое задание высоты. А соответственно и высота вложенных объектов может быть задана на основании высоты родителя. (если у прародителя не будет задана чётко высота, то и высота родителя определится по иным правилам, и высота данного элемента также не будет завязана на высоте его родителя даже при height: 100% у родителя)

Если не ошибаюсь, вроде так. Время позднее, мог что-то упустить :).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.07.2013, 02:19
    #38315296
lanzer
lanzer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
relative position - не работает процентное смещение + вопрос про высоту html и body
Програмёр, 5
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / relative position - не работает процентное смещение + вопрос про высоту html и body / 3 сообщений из 3, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 526ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448178]:
 0ms
get settings:
 10ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 198ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 251ms
total:  526ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]