Как спрятать блок за экран без горизонтальной прокрутки?

MiHALbI4 · August 4, 2010

У сайта есть блок div с элементом графики (красный блок), который не влезает в разрешение 1024, т.е. виден только в более высоком разрешении. Как сделать, чтобы браузеры не реагировали на него и не появлялась горизонтальная прокрутка в меньших разрешениях?

Great Rash · August 4, 2010

Оберните красный блок в еще один блок у которого поставьте overflow: hidden;

<div style="position: relative; height: 100px; overflow: hidden; border: red 1px solid;">
	<div style="position: absolute; right: -50px; width: 150px; height: 100px; background: red;"></div>
</div>

MiHALbI4 · August 4, 2010

В моем случае сделал немножко по-другому через overflow: hidden, но спасибо, помогло. Но теперь вообще нет горизонтальной прокрутки. Можно как-нибудь доделать это, чтобы при менее 955px срабатывал overflow: visible и появлялась полоса прокрутки?

psywalker · August 4, 2010

В моем случае сделал немножко по-другому через overflow: hidden, но спасибо, помогло. Но теперь вообще нет горизонтальной прокрутки. Можно как-нибудь доделать это, чтобы при менее 955px срабатывал overflow: visible и появлялась полоса прокрутки?

Да, можно сделать так

<div style=" height: 100px; overflow: hidden; border: red 1px solid; min-width: 995px;">
	<div style="height: 100px; background: red;"></div>
</div>

botyaslonim · August 7, 2010

У меня аналогичная ситуация.

А как сделать так, чтобы при разрешении менее 1024 появлялась полоса прокрутки, но только в пределах основного дива?

А при бОльшем (например, 1600), был виден и красный блок?

Justnewone · August 8, 2010

У меня аналогичная ситуация.
А как сделать так, чтобы при разрешении менее 1024 появлялась полоса прокрутки, но только в пределах основного дива?
А при бОльшем (например, 1600), был виден и красный блок?

Предположу, что отрицателльный маргин может помочь

botyaslonim · August 8, 2010

margin не помогает. Появляется ненужная полоса прокрутки.

psywalker · August 8, 2010

Такой вариант не покатит? http://psywalker.ru/Forum/Column/main2.html

botyaslonim · August 8, 2010

Ха. У меня осталось то же самое. Мало того, на всех браузерах, кроме IE, появилась ненужная вертикальная полоса прокрутки... :lol:

Такой вариант не покатит? http://psywalker.ru/Forum/Column/main2.html

mishka · August 8, 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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		body{
			margin:0;
			min-width:1000px;
			_width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
		}
		#wrapper{
			width:100%;
			overflow:hidden;
			position:relative;
		}
		#content{
			width:1000px;
			position:relative;
			margin:0 auto;
		}
		.decor{
			position:absolute;
			left:100%;
			top:0;
			width:50px;
			height:50px;
			background:#f00;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="content">
			<p>Lorem ipsum dolor sit amet consectetuer Phasellus Nulla Vestibulum faucibus mattis. Ac enim dolor facilisi tellus in massa tellus quis non consectetuer. Consequat tortor libero dictumst Curabitur Suspendisse a Nam tellus amet elit. Tincidunt Cum In.</p>
			<p>Tempus lacinia lacus Duis ridiculus adipiscing semper eget tellus ut tincidunt. Ante sapien ligula congue pretium pede et Praesent eget Proin congue. Tincidunt pede massa tellus elit Vivamus at tellus et sagittis enim. Phasellus porttitor ante Vivamus volutpat ligula penatibus et nunc.</p>
			<div class="decor"></div>
		</div>
	</div>
</body>
</html>

botyaslonim · August 8, 2010

Эмпирически вывел такую штуку. Не могу понять, откуда такое значение - 450... (Ширина основного блока у меня 1600)

   #left, #right {width: 50%;}

   #left {float: left; margin-right: -800px; height: 1000px;} 
   #left-inner {margin-right: 800px; height: 1000px;}

   #right {float: right;  margin-left: -801px; z-index: -1; height: 1000px;}
   #right-inner {margin-left: 450px; height: 1000px;}

   #center {position: relative; z-index: 1; float: left; width: 1600px; height: 1000px;}

В этом примере горизонтальной полосы прокрутки нет, но только правый текст центруется по-уродски... Промежуточное решение.

И опять же, вертикальная полоса прокрутки никуда не делась.

Такой вариант не покатит? http://psywalker.ru/Forum/Column/main2.html

mishka · August 8, 2010

botyaslonim, ты меня игноришь? или просто сам с собой общаешься?

psywalker · August 8, 2010

Странный тип, ага.

botyaslonim · August 8, 2010

Нет, не игнорю. Подумал, что ты общаешься с ТС, т.к. речь про красный квадратик.

Спасибо, с правой частью твой способ работает, всё как надо. Только, если брать твой пример, див класс decor я вынес из дива контент. Тогда у меня заработало как надо.

Теперь вопрос: что с левой частью, как прикрутить к основному блоку слева?

botyaslonim, ты меня игноришь? или просто сам с собой общаешься?

Всё, окончательно допилил. Выкладываю, что получилось. Чтобы не считали странным типом :lol:

CSS

   body {margin: 0; min-width:1600px; _width:expression(document.documentElement.clientWidth < 1600 ? "1600px" : "auto");}

   #wrapper{width: 100%; overflow: hidden; position: relative;}
   #center {position: relative; width: 1600px; height: 1000px; margin:0 auto;}
   #right {position: absolute; left:100%; top:0; width: 500px;}   
   #left {position: absolute; top:0; left:-400px; width: 350px; padding: 30px;}

HTML

<body>


<div id = "wrapper">


	<div id="center">

			 блаблабла
			 ———-
			 ———-
	</div>


	<div id = "left">
	   <p>.................</p>
	</div>


	<div id="right">
		 <p>................</p>
	</div>
</div>

</body>

Edited August 8, 2010 by botyaslonim

mishka · August 9, 2010

Нет, не игнорю. Подумал, что ты общаешься с ТС, т.к. речь про красный квадратик.

Я думал ты ТС .

Так и непонял что ты хотел, и чего достиг

Если задача ТС была ясна из дизайна, кроме мелочей.

То чего хотел ты - для меня осталось загадкой

botyaslonim · August 10, 2010

)) Вот! Не понял, чего я хотел, зато дал правильный совет! Интуитивно, наверное...

У меня ситуация такая: красных блока не 1, как у ТС, а 2. Нужно было, чтобы при разрешении 1600 был виден только центральный, при ctrl- начали появляться ОБА блока (соотвественно, вся конструкция находится по центру), а при ctrl+ увеличивался только центральный блок и появлялась полоса прокрутки (только в пределах центрального блока, красные квадратики скрыты).

Получившееся решение я опубликовал. Может, кому будет нужно.

Sign In

Как спрятать блок за экран без горизонтальной прокрутки?

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information