Нет полосы прокрутки для DIV шире браузера

Я делаю несколько тестов на веб-сайте, используя Wordpress в качестве CMS. В приведенном ниже примере в верхнем левом углу страницы есть символ «S» за пределами основной области содержимого, обрезанный соответствующим образом в зависимости от ширины браузера. Я хотел бы сделать что-то подобное с буквой «L» справа в нижнем колонтитуле.

Ширина страницы установлена ​​​​на 960 пикселей, и я сделал DIV-контейнер нижнего колонтитула 1088 пикселей, чтобы буква «L» отображалась за пределами области содержимого. Проблема в том, что полоса прокрутки появляется, когда она превышает текущую ширину браузера.

Я пробовал overflow:hidden в DIV-контейнере нижнего колонтитула, но это, похоже, не работает. Я также пробовал overflow:hidden для элемента BODY, и это нормально работает в IE, но не в других браузерах.

Пример: http://unclemort.com/wp/

Я действительно надеюсь, что это можно сделать, любая помощь с благодарностью получена.


browser html overflow scrollbars
person user283520    schedule 01.03.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Я пытался понять это сам сегодня и наткнулся на ответ. Что вам нужно, так это окружающий элемент вокруг всего, что имеет это:

#wrapper {
  min-width: 600px; //whatever width you want
  overflow-x: hidden;
}

Ваш основной контент должен иметь такую ​​же ширину, а то, что должно выступать, должно иметь отрицательное поле.

Вот полный пример:

HTML:

<div id="outer">
   <div id="container">
       <div class="row">
           <div class="inner">Hello World</div>
       </div>
    </div>
</div>

CSS:

  #outer {
      min-width: 300px;
      overflow-x: hidden;
  }

  #container {
      width: 300px;
      margin: 0px auto;
      background: gray;
      height: 500px;    
  }

  .row {
      width: 350px;
      background: blue;
      margin-left: -25px;
  }

  .inner {
      background: yellow;
      margin-left: 25px;
      width: 300px;
      height: 100px;
  }

  @media screen and (min-width: 301px) {
      body {
          //overflow-x: hidden;
      }
  }

jsfiddle:

http://jsfiddle.net/aaronjensen/9szhN/

person Aaron Jensen    schedule 27.04.2012
comment
Это прекрасное кросс-браузерное решение (хотя мне пришлось заменить overflow-x на простое переполнение, чтобы в некоторых браузерах не отображались вертикальные полосы прокрутки на самом внешнем элементе div). - person Ojame; 12.02.2013

arrow_upward
-1
arrow_downward

Попробуйте в style.css, строка 65, добавить:

#footer-container {
    border: none;
    overflow: hidden;
}

Объяснение:

#footer-container #footer {
    background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left;
    width: 1088px;      
    height: 217px;  
    overflow: hidden;   
    }

Полоса прокрутки, которую вы скрываете, фактически нет. Полоса прокрутки, которую вы видите, - это еще одна. Проблема в том, что нижний колонтитул имеет ширину 1088 пикселей, и это вызывает появление полосы прокрутки.

Пока нижний колонтитул имеет фиксированную ширину, а его родитель не имеет overflow: hidden, вы получите прокрутку, если для нижнего колонтитула не хватит ширины. То же самое касается любого другого контейнера.

person ANeves thinks SE is evil    schedule 01.03.2010
comment
Привет, спасибо за быстрый ответ. Я пытался установить overflow: hidden как в контейнере нижнего колонтитула, так и в div нижнего колонтитула, но это всего лишь фрагменты правой части нижнего колонтитула за пределами основного содержимого (за пределами 960 пикселей). Теперь я поместил overflow-x: hidden; и overflow-y: auto в элементе стиля BODY, и это, кажется, сработало - теперь единственная проблема заключается в том, насколько обратно совместимы эти атрибуты с другими браузерами? - person user283520; 01.03.2010
comment
На самом деле overflow-x: hidden на BODY, вероятно, не очень хорошая идея, поскольку он скрывает полосы прокрутки, когда размер окна браузера изменяется или становится меньше, чем ширина страницы моего сайта (960 пикселей). Все еще ищу ответ! - person user283520; 01.03.2010
comment
Ну да, рубит - как и ожидалось. Он скрывает переполнение, что и было сказано сделать. Что если выровнять фоновое изображение по правому краю, а не по левому? Разве это не сработает для вас? См.: htmldog.com/reference/cssproperties/background htmldog.com/reference/cssproperties/background-position (Да, переполнение: скрытое на теле имеет ужасные эффекты.) - person ANeves thinks SE is evil; 01.03.2010