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

Question

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

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

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

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

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

Answer 1

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

#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/

Answer 2

Попробуйте в 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 пикселей, что приводит к появлению полосы прокрутки.

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