Как запретить браузеру показывать полосы прокрутки, когда div выходит за пределы окна? - PullRequest
Новая
       11

Как запретить браузеру показывать полосы прокрутки, когда div выходит за пределы окна?

3 голосов
/ 14 апреля 2010

У меня есть центрированная оболочка со следующим CSS: 

div.wrapper {
width: 1170px;
padding-left:30px;
margin-top: 80px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
position:relative;  
background-color:black; }

внутри у меня есть div со следующим css: 

position:absolute;
top:-26px;
left:517px;
height:63px;
z-index:3;

внутри этого div - изображение шириной 759 пикселей, которое увеличивает оболочку и заставляет браузер отображать полосу прокрутки v при более низких разрешениях экрана. я хочу, чтобы изображение выходило за пределы оболочки, но не позволяло браузеру отображать полосу прокрутки, чтобы правая сторона изображения отображалась только в том случае, если окно браузера достаточно велико и оболочка сохраняет ширину 1200 пикселей. я не могу сделать это фоновым изображением, потому что оно выходит за рамки другого контента. что-то, что совместимо с> = IE7 было бы хорошо.

Я загрузил фото страницы, чтобы показать, что я имею в виду: http://img153.imageshack.us/img153/6070/hpx.jpg

синяя рамка - это обертка, она имеет ширину 1200 пикселей и ВСЕГДА центрируется в окне (если только окно меньше 1200 пикселей, то оно прокручивается) красная рамка - изображение (зеленая полоса не является его частью)

Ответы [ 4 ]

4 голосов
/ 14 апреля 2010

Вы можете установить overflow: hidden для оболочки, чтобы содержимое, превышающее размеры оболочки, не отображалось.

см. переполнение

2 голосов
/ 14 апреля 2010

Единственный метод, который приходит на ум, учитывая ваши требования, - это переместить внутренний элемент из этого div-оболочки и расположить его относительно всего окна: 

<body>
  <div class="abs">the div with the image</div>
  <div class="wrapper">the wrapper div</div>
</body>

К сожалению, это, вероятно, означает, что вы не можете расположить его очень хорошо. Возможно, вам придется использовать Javascript, чтобы получить ширину / высоту страницы и / или положение div-оболочки, и соответственно рассчитать смещение. (Вы найдете вопросы о переполнении стека для этих битов.)

2 голосов
/ 14 апреля 2010

Вы ищете #your_div { overflow: hidden; }, если хотите, чтобы ваш контент был скрыт. Или #your_div { overflow: visible; }, если вы хотите, чтобы ваш контент был виден за пределами div.

1 голос
/ 14 апреля 2010

Проблема в том, что img встроен. Не проверено, но вы должны «отобразить: заблокировать» изображение и затем поместить его в исходное положение или полностью позиционировать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...