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

Question

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

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

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

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

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

То, что я сейчас что-то вроде этого:

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

я пытался поля, отступы, даже% -поперечниках для самого внутреннего ДИВ и все «делать сдвиг» вещь. Я также нуждаюсь в этом, чтобы работать в IE3/8 и FF3 IE6.

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Одним из решений является увеличение размера содержимого по ширине полосы прокрутки при наведении курсора. Вот решение, которое не нужно использовать какие-либо вложенные внешние контейнеры (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> 

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

• С помощью точек

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

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

Answer 5

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

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

Мое уродливое решение состояло в том, чтобы добавить div внутри переполнения-y: auto-div, который имел отображение: встроенный блок, и добавить еще один небольшой встроенный блок div после него, который был шириной 19 пикселей (зарезервировано для полосы прокрутки) и высотой пикселя. Этот маленький div появится рядом с реальным div, когда браузер изменит размер div на контент, и когда появится полоса прокрутки, маленький div будет нажат под реальный div, а реальный div сохранит его. Это вызовет «край» одного пикселя, но, надеюсь, не проблема. Когда нет полосы прокрутки ppears, есть 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>