CSS 100% ширины, но избегайте полосы прокрутки

Question

Это, вероятно, вариант чего-то, что решалось десятки раз, но CSS действительно заставляет меня чувствовать себя дураком.

Я пытаюсь создать виджет, который можно позиционировать и измерять различными способами.пути.Это довольно простая компоновка - заголовок с фиксированной высотой, нижний колонтитул с фиксированной высотой и тело, занимающее оставшееся пространство.Общая ширина и высота варьируется.Содержание тела нужно прокручивать.У меня есть общий размер контейнера, верхнего колонтитула, нижнего колонтитула и размера тела.

Но я хочу, чтобы тело прокручивалось, когда ему нужно БЕЗ сжатия содержимого влево, когда появляется полоса прокрутки.То есть я хочу, чтобы тело было настолько широким, насколько это возможно, МИНУС полосы прокрутки, которая была бы там, если бы она нуждалась в прокрутке, чтобы при необходимости прокрутки не было сжатия.По сути, я хочу это:

| - - - unknown width - - -|
+--------------------------+
| content                |*|
| might                  |*|
| scroll                 |*|
+--------------------------+

Я хочу, чтобы содержимое, которое может прокручиваться, было настолько широким, насколько это возможно, МИНУС потенциальной ширины полосы прокрутки (| * | регион).

Что яТеперь у меня есть что-то вроде этого:

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
    </div>
</div>

Я пробовал поля, отступы, даже% -полосы для самого внутреннего элемента div и всего, что нужно, «сделать сдвиг».Мне также нужно, чтобы это работало в FF3, IE7 / 8 и (фантазии?) IE6.

Answer 1

Используйте overflow: scroll вместо overflow: auto - это заставит полосу прокрутки всегда появляться.

Answer 2

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

Answer 3

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

У меня был divон автоматически изменял размер содержимого, а затем добавлялся свиток, сжимающий внутреннюю часть, так что таблица в нем оборачивалась текстом, а не делала контейнер намного шире.Нежелательный эффект виден в приведенном ниже старом примере, если текстовая область изменена вниз и появляется прокрутка.

Мое уродливое решение было добавить div внутри overflow-y: auto-div, у которого было отображение:inline-block, и добавить еще один небольшой div inline-block после него, который был шириной 19 пикселей (зарезервирован для полосы прокрутки) и высотой в пиксель.Этот маленький div появится рядом с реальным div, когда браузер изменит размер div на контент, и когда появится полоса прокрутки, маленький div будет помещен под реальный div, и настоящий div сохранит его.Это приведет к однопиксельному нижнему «краю», но, надеюсь, не проблема.Когда никакая полоса прокрутки не появляется, рядом с реальным div находится 19 пикселей неиспользуемого пространства, как описано в Вопросе.

(самый внешний div находится именно там, чтобы воспроизвести мои настройки / проблемы.)

Старый:

<div style="display:inline-block">
  <div style="max-height:120px; overflow-y:auto; border:1px solid gray">
    <table border=1><tr>
       <td>I do not</td><td>want this to</td>
       <td>add breaks in the text.</td>
    </tr></table>
    <textarea rows=3 cols=15>Resize me down</textarea>
  </div>
</div>
<br>

Новый:

<div style="display:inline-block">
  <div style="max-height:150px;overflow-y:auto; border:1px solid gray">
    <div style="display:inline-block">
      <table border=1><tr>
          <td>I do not</td><td>want this to</td>
          <td>add breaks in the text.</td>
      </tr></table>
      <textarea rows=3 cols=15>Resize me down</textarea>
    </div>
    <div style="display:inline-block; width:19px; height:1px"></div>
  </div>
</div>
<br>

Answer 4

Почему бы не отображать всегда полосы прокрутки, даже если нет необходимости прокручивать?

Этого можно добиться, установив overflow:scroll; для контейнера.

Answer 5

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

Одним из решений является увеличение размера содержимого на ширину полосы прокрутки.при наведенииВот решение, которое не требует использования вложенных внешних контейнеров (categoryCont - это контейнер прокрутки, а каждый menuBlock - это один из элементов для прокрутки):

<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
    <div class="menuBlock" style="width:200px">a</div>
    <div class="menuBlock" style="width:200px">b</div>
    <div class="menuBlock" style="width:200px">c</div>
    ...
</div>

<style type="text/css">
    #categoryCont:hover{
        overflow-y: auto;
    }
    #categoryCont:hover .menuBlock{
    /* Increase size of menu block when scrollbar appears */
        width: 218px;    /* Adjust for width of scroll bar. */
    }
</style>

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

• Используя px

Сделать содержимое абсолютным значением с отступом слева в качестве абсолютного значения

<div class="menuBlock" style="width:200px">
    a
</div>

изменяется на

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;
        left:70px;
    }
</style>

• При использовании%

Вам нужны и CSS, и jQuery (первый шаг такой же)

<div class="menuBlock" style="width:200px">
    a
</div>

изменения на

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;  /* This one does not use 'left' */
    }
</style>

<script>
    // Indent left 30% because container width remains same but content width changes
    var leftIndent = (30/100) * $("#categoryCont").width();
    $(".menuBlock span").css({"left":leftIndent});
</script>