ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Позиция DIV
14 сообщений из 14, страница 1 из 1
Позиция DIV
    #38863824
Esentuki
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Esentuki
Участник
Здравствуйте, Подскажите как спозиционировать div поверх контента по середине именно видимой части страницы высота и ширина div заранее известны

Сейчас я сделал так:
<DIV style="position:absolute; width:500; height:300; top: 50%; left: 50%; margin-left: -250px; margin-top: -150px;">

Однако такой метод позиционирует div относительно высоты и ширины всего документа а мне требуется без учета полос прокрутки (по середине окна)


заранее спасибо
...
Рейтинг: 0 / 0
27.01.2015, 03:16
| Ответить | Цитировать | Написать  
Позиция DIV
    #38863877
Фотография FishHook
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FishHook
Участник
Код: css
1.
2.
3.
4.
.foo{
    position: absolute;
    top: 50vh;
}
...
Рейтинг: 0 / 0
27.01.2015, 08:08
| Ответить | Цитировать | Написать  
Позиция DIV
    #38863910
Esentuki
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Esentuki
Участник
Прошу прощения что такое "top: 50vh;" ???
...
Рейтинг: 0 / 0
27.01.2015, 09:04
| Ответить | Цитировать | Написать  
Позиция DIV
    #38863920
Фотография FishHook
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FishHook
Участник
http://habrahabr.ru/post/126863/
...
Рейтинг: 0 / 0
27.01.2015, 09:20
| Ответить | Цитировать | Написать  
Позиция DIV
    #38864997
Esentuki
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Esentuki
Участник
Нахера нужна единица которая "На данный момент поддерживается только Internet Explorer 9.???" (цитата из статьи на которую ты кинул ссылку) Какой идиот ее будет использовать???
...
Рейтинг: 0 / 0
28.01.2015, 06:19
| Ответить | Цитировать | Написать  
Позиция DIV
    #38865084
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
EsentukiСейчас я сделал так:
<DIV style="position:absolute; width:500; height:300; top: 50%; left: 50%; margin-left: -250px; margin-top: -150px;">Тут у высоты и ширины, пиксели надо задать, width:500 px ; height:300 px ;   Нормально получается
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!DOCTYPE html>
<html>
<head>
<title>abc</title>
<style>
.big {width:4000px; height:4000px; background:#eee;}
.centr {
	position:absolute;
	width:500px; height:300px;
	top:50%; left:50%;
	margin-left:-250px;
	margin-top:-150px;
	border:1px solid #aaa; background:#fff;
}
</style>
</head>
<body>
	<div class="big">Это большой DIV, что делает полосы прокрутки</div>
	<div class="centr">DIV по центру монитора</div>
</body>
</html>
...
Рейтинг: 0 / 0
28.01.2015, 09:42
| Ответить | Цитировать | Написать  
Позиция DIV
    #38865136
_user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_user89
Гость
Esentuki,
 
На всякий случай, если резиновый DIV по центру экрана
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE html>
<html>
<head>
<title>Выравнивание резинового DIV по центру экрана</title>
<style>
.TableCenter {
	position:absolute;
	top:0; left:0;
	height:100%;
	width:100%;
	z-index:-1;
}
.DivCenter {
	background:orange;
	display:table;
	margin:auto;
}
</style>
</head>
<body>
~~~~~~~~~~~~~~~~~~~~~~~~~~~ Некий текст, который просто располагается на странице.<br><br>
<div style="border:4px double #87CEEB;">А это Div, который ни с чем не связан.</div>
<table class="TableCenter"><tr><td>
		<div class="DivCenter">Этот DIV<br>резиновый.<br><br><br>Он выровнен по центру экрана.<br><br>Как по горизонтали,<br>так и по вертикали<br><br><br><br>
		Сериал "Стрела" хороший, но много логических несостыковок.</div>
</td></tr></table>
</body>
</html>

...
Рейтинг: 0 / 0
28.01.2015, 10:17
| Ответить | Цитировать | Написать  
Позиция DIV
    #38865342
Фотография FishHook
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FishHook
Участник
EsentukiНахера нужна единица которая "На данный момент поддерживается только Internet Explorer 9.???
Статья 2011го года. Сейчас 2015й.
...
Рейтинг: 0 / 0
28.01.2015, 12:16
| Ответить | Цитировать | Написать  
Позиция DIV
    #38865344
Фотография FishHook
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FishHook
Участник
EsentukiКакой идиот ее будет использовать???
Какой идиот будет использовать восьмого осла? Ты делаешь сайт для идиотов?
...
Рейтинг: 0 / 0
28.01.2015, 12:17
| Ответить | Цитировать | Написать  
Позиция DIV
    #38866129
Esentuki
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Esentuki
Участник
FishHook,
Ну можно сказать и так
На нашем предприятии до сих пор есть ie8...
А мне остается только подстраиваться под такую "политику"
...
Рейтинг: 0 / 0
29.01.2015, 02:57
| Ответить | Цитировать | Написать  
Позиция DIV
    #38866130
Esentuki
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Esentuki
Участник
...кстати она вообще другими браузерами не поддерживается.. только ie 9 и в гору
...
Рейтинг: 0 / 0
29.01.2015, 02:59
| Ответить | Цитировать | Написать  
Позиция DIV
    #38866386
Фотография FishHook
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FishHook
Участник
Esentukiкстати она вообще другими браузерами не поддерживается.. только ie 9 и в гору
ЩИТО???????
...
Рейтинг: 0 / 0
29.01.2015, 11:09
| Ответить | Цитировать | Написать  
Позиция DIV
    #38866506
Фотография FishHook
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
FishHook
Участник
http://caniuse.com/#search=vh
...
Рейтинг: 0 / 0
29.01.2015, 12:28
| Ответить | Цитировать | Написать  
Позиция DIV
    #38869129
Фотография Areostar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Areostar
Участник
EsentukiЗдравствуйте, Подскажите как спозиционировать div поверх контента по середине именно видимой части страницы высота и ширина div заранее известны

Сейчас я сделал так:
<DIV style="position:absolute; width:500; height:300; top: 50%; left: 50%; margin-left: -250px; margin-top: -150px;">

Однако такой метод позиционирует div относительно высоты и ширины всего документа а мне требуется без учета полос прокрутки (по середине окна)


заранее спасибо

Добавить позиционирование
...
Рейтинг: 0 / 0
02.02.2015, 10:26
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Позиция DIV
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38864997&tid=1446313]:
 0ms
get settings:
 7ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 159ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 194ms
total:  439ms
созд. / загр.: 439ms
x
x
Закрыть


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