Подтвердить что ты не робот

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

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

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

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

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

Я хочу, чтобы содержимое, которое могло прокручиваться, было таким же широким, как и MINUS, возможная ширина полосы прокрутки (| * | region).

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

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

Я пробовал поля, отступы, даже% -width для самого внутреннего div и все вещи "делаю сдвиг". Я также нуждаюсь в этом, чтобы работать в IE7/8 и FF3 IE6.

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

Ответ 3

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

Вы можете достичь этого, установив overflow:scroll; в контейнер.

Ответ 4

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

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

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

(Самый удаленный 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>

Ответ 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>