position:absolute за пределы окна монитора

Колос · August 18, 2010

Как сделать так чтобы position:absolute за пределы окна монитора не приводило к появлению прокрутки?

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

Простейший пример:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  <title>Пример</title>  
  <style>
	DIV.primer1
	{
	  width:100px;
	  height:100px;
	  background-color:#F00;
	  position:absolute;
	  top:0px;
	  left:-50px;
	}
	DIV.primer2
	{
	  width:100px;
	  height:100px;
	  background-color:#F00;
	  position:absolute;
	  top:0px;
	  right:-50px;
	}
  </style>
</head>
<body>
  <div class="primer1"></div>
  <!--<div class="primer2"></div>-->
</body>
</html>

В приведённом коде слой сдвинут за левую границу экрана и горизонтальной прокрутки нет. Если же закоментить primer1 и раскоментить primer2, то слою не удастся сдвинуться за правую границу экрана, вместо этого просто возникнет горизонтальная прокрутка.

Вопрос теоретический: Почему так получается?

Вопрос практический: Как сделать так, чтобы сдвинуть слой за правую границу монитора?

Vlad · August 18, 2010

Получается понятно почему, потому что левая граница страницы совпадает с левой границей окна. У правой границы ограничений же нет.

Решение

html {width: 100%; overflow: hidden;}

Колос · August 18, 2010

Получается понятно почему, потому что левая граница страницы совпадает с левой границей окна. У правой границы ограничений же нет.
Решение
html {width: 100%; overflow: hidden;}

Спасибо. Решение конечно подходит для данного примера. Только на настоящем сайте такое не пройдёт, потому что у меня html {height: 100%} и вертикальные прокрутки сразу грохаются.

... По сути мне нужно решить довольно простую задачу: имеется основа сайта шириной 980 пикселей выровненая по горизонтали. Слева и справа поля имеющие свою ширину в зависимости от ширины монитора.

Теперь по бокам от основы нужно добавить тени шириной пикселов по 90. При этом горизонтальной прокрутки возникнуть не должно даже на мониторе шириной 1024 пикселя. То есть на таком мониторе края тени должны уходить за пределы экрана.

Я попытался просто прописать этим теням position:absolute. В итоге с левой тенью номер прошёл, а вот с правой нет.

Но может есть какое другое решение?

DjTarik · August 18, 2010

Есть решение. Я задавался таким же вопросом год назад) Где-то есть тема, поищи. +ещё мне Максим рассказывал, как сделать тени, уходящие за экран. Там та же фигня. Короче - поиск, на форуме всё есть.

Great Rash · August 19, 2010

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html, body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		body {
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		.wrapper {
			min-height: 100%;
			height: auto !important;
			height: 100%;
			position: relative;
			overflow: hidden;
		}

		.test {
			position: absolute;
			left: 0;
			top: 0;
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>

<body>

	<div class="wrapper">
		<div class="test" onclick="this.style.left = '99%';">
			кликни в меня и я улечу
		</div>
	</div>

</body>
</html>

Колос · August 19, 2010

DjTarik

Спасибо.Нашёл твою ветку.

Вот она http://forum.htmlbook.ru/index.php?showtopic=13076&hl=

Честно говоря даже не стал рассматривать подробности, когда увидел упоминание про background-position:center, то сразу дошло как нужно сделать. Нужно создать горизонтальную полосу с пустой серединой равной по ширине основной части, а слева и справа тени. И задать эту полосу фоном для body с background-position:center.

Great Rash

Тоже спасибо. То есть это примерно то, что предложил Влад, но развито. Не понял только зачем {height: auto !important;height: 100%;} во wrapper. В обычных браузерах работает и без этого. А ИЕ6 режет содержимое превышающее по высоте экран, что с этим, что без.

Great Rash · August 19, 2010

В обычных браузерах работает и без этого. А ИЕ6 режет содержимое превышающее по высоте экран, что с этим, что без.

Да, об этом я как-то не подумал...

DjTarik · August 19, 2010

DjTarik
Спасибо.Нашёл твою ветку.
Вот она http://forum.htmlbook.ru/index.php?showtopic=13076&hl=
Честно говоря даже не стал рассматривать подробности, когда увидел упоминание про background-position:center, то сразу дошло как нужно сделать. Нужно создать горизонтальную полосу с пустой серединой равной по ширине основной части, а слева и справа тени. И задать эту полосу фоном для body с background-position:center.

Кстати - это очень узкое решение. Если ты присмотришься - то заметишь, что при чётной/нечётной ширине браузера твой бэкгроунд дергается на 1px. Именно поэтому там столько рассуждений. =)

Sign In

position:absolute за пределы окна монитора

Question

Колос

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information