Как предотвратить полосу прокрутки, если область висит из содержащего блока? - PullRequest
Новая
       25

Как предотвратить полосу прокрутки, если область висит из содержащего блока?

0 голосов
/ 30 марта 2012

Мне нужно написать разметку и CSS, чтобы фоновое изображение не создавало полосу прокрутки.Только если область просмотра является более узкой, чем внутренняя оболочка содержимого, создается полоса прокрутки:

http://www.mcm.unisg.ch/

У меня не работает: Абсолютно расположенный div справа, вызывая полосу прокруткикогда левый не .

Одна из возможных тщетных попыток в фиксированном макете: 

#background {
  width: auto;
  margin-left: -75px;
  margin-right: -75px;
}

Область, которая свисает с содержащего блока слева (из-заотрицательная граница) недоступна при прокрутке влево.Да!Но отрицательное поле справа создает полосу прокрутки в случае узкой области просмотра.Как я могу предотвратить полосу прокрутки, если область просмотра шире, чем содержащий блок?

Разметка: 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>&nbsp;</title>
  <link rel="stylesheet" type="text/css" href="css/general.css" media="screen, projection"/>
  <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="css/general-ie.css" media="screen"/>
  <![endif]-->
</head>
<body>

  <div id="page">
    <img id="background" src="images/visual.jpg" alt="" />
    <div id="head"><h1>Page title</h1></div><!-- /#head -->
    <div id="mainpart">
      <ul id="zones">
        <li>
          <ul>
            <li class="module">Modul #1</li><!-- /#module -->
          </ul>
        </li>        
      </ul><!-- /#zones -->
      <hr />
    </div><!-- /#mainpart -->
  <div id="foot"><h1>Footer</h1></div><!-- /#foot -->
</div><!-- /#page -->

</body>
</html>

Правила CSS: 

body {
  background: #000;
  color: #000;
}
#page, #mainpart {
  background: #fff;
}

#page {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto;
  margin-left: -75px;
  margin-right: -75px;
}

МожетКто-нибудь дать мне хорошую рекламу?Спасибо.

Ответы [ 3 ]

2 голосов
/ 30 марта 2012

Чтобы предотвратить появление полос прокрутки, используйте: 

mySelector
{
    overflow: hidden;
}

Здесь вы можете увидеть его во всей красе: Пример jsFiddle .

0 голосов
/ 28 октября 2014

Чтобы уточнить опцию «поддельного тела», на которую намекает mediaashley, это означает, что ваш контент, включая переполняющийся элемент, должен обернуться таким элементом: 

#fakeBody {
    width: 100%;
    min-width: 1000px; // needs to match the main content’s width
    overflow: hidden;
}

Ширина: 100% означает, что это будетсоответствует ширине окна, но когда окно становится меньше минимальной ширины, его переполнение: скрытый атрибут обрезает развешивающийся контент.

0 голосов
/ 05 июля 2014

Это довольно старый пост, но для всех пользователей Google:

Этот вопрос (https://stackoverflow.com/questions/13326111/element-outside-container-without-creating-scrollbars) имеет несколько действительно хороших ответов на это. Если я понимаю ваши требования.

Вы можете сделать это либо с помощью элемента «поддельное тело», либо с помощью точек останова, чтобы просто скрыть содержимое, когда область просмотра слишком мала.

Оба варианта являются прямыми.имеет смысл только тогда, когда вы можете видеть все / большую часть этого, тогда опция точки останова может сэкономить вам некоторую пропускную способность и, возможно, избавить пользователя от разочарования.

...