Увеличить ширину при переполнении для настройки полосы прокрутки

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

Вот сценарий, у меня есть div и дочерние элементы

<div id="ListHolder"> 
     <ul id="LeftList">
        <li></li>
        <li></li>
        <li></li>
     </ul>

     <ul id="RightList">
        <li></li>
        <li></li>
        <li></li>
     </ul>
</div>

example picture

Я хочу настроить свою ширину div автоматически для полос прокрутки, когда она имеет переполнение. Значит, когда нет полосы прокрутки, она должна быть похожа на изображение с левой стороны, и когда полосы прокрутки становятся видимыми, она должна автоматически регулировать ширину полосы прокрутки. Я не хочу использовать javascript, но с чистым CSS и HTML. И я считаю, что это возможно только с CSS и HTML.

Учитывая вышеперечисленные списки UL, мой CSS-код похож на

 #ListHolder
 {
     display:inline-block;
 }
 #ListHolder > ul
 {
     width:250px;     //<---Necessary to keep fixed width not percentage
     display:inline-block;
 }
 #ListHolder > ul > li
 {
     display:inline-block;
 }
 #LeftList
 {
     float:left;
 }
 #RightList
 {
     float:right;
 }

ОТВЕТЫ

Ответ 1

Как отмечали другие люди, нет способа адаптировать ширину div на основе условия полосы прокрутки только с помощью CSS.

Вы можете найти обходной путь, например, ширину полосы прокрутки в фиксированной ширине здесь. Это просто, эффективно, scollbar отображается справа от вашего содержимого, но при изменении полосы прокрутки она не меняет ширину контейнера.

CSS не может установить условную ширину в контейнер на основе наличия полосы прокрутки, например:

  • Если у меня есть полоса прокрутки, дайте мне эту ширину
  • Если у меня нет полосы прокрутки, дайте мне эту другую ширину

Итак, для достижения такого точного поведения вы не можете использовать CSS.

Я написал этот простой JS (без библиотеки, поэтому он легкий) код, который дает вам поведение, которое вы ищете:

var div= document.getElementById('ListHolder');
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;

if (hasVerticalScrollbar > 0) {
    div.style.width = '530px' ;
}

Теперь это работает только при загрузке страницы. Если вы также хотите, чтобы это поведение изменилось, вы можете добавить:

window.addEventListener( 'resize', function( event ) {
    var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
    if (hasVerticalScrollbar > 0) {
        div.style.width = '530px' ;
    }
    else{
        div.style.width = '500px' ;        
    }
}, false );

ДЕМО ЗДЕСЬ

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

Ответ 2

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

Предположим, вы пытаетесь создать div-wrap-wrap, содержащий два столбца шириной 250 пикселей. Браузер рассчитает свою ширину как 500px, затем высоту, и если требуется полоса прокрутки, она соответствует полосе прокрутки внутри этих 500px, уменьшая доступную ширину до 483 пикселей (или около того).

Сложное решение выглядит следующим образом:

  • Добавьте достаточное количество правильного заполнения в поле, которое (может) отображать полосу прокрутки.
  • Задайте свойство width в этом поле или сделайте эту коробку оберткой вокруг своего содержимого.
  • Задайте max-height для желаемого значения и overflow-y для свойства auto для запуска автоматической полосы прокрутки

В этот момент окно будет как можно шире, а полоса прокрутки, если она видна, нарисована над правильным дополнением; не мешая ширине.

Чтобы отобразить хром (границу и дополнение), вам нужно создать дополнительные div.

Разметка HTML:

<div id="ListBorder">
    <div id="ListOverflow">
        <div id="ListHolder">
            <ul id="LeftList">
                <li></li><li></li><li></li>
            </ul>
            <ul id="RightList">
                <li></li><li></li><li></li>
            </ul>
        </div>
    </div>
</div>

CSS (только важные бит)

#ListHolder ul {
    float: left;
    width: 250px;
}
#ListHolder {
    width: 500px;
    overflow: hidden;
}
#ListOverflow {
    width: 500px;
    overflow: auto;
    max-height: 350px;
    padding-right: 20px;
}
#ListBorder {
    width: 500px;
    border: 1px solid;
    padding: 20px;
}

Примечание:

  • #ListHolder используется для clear-fix
  • #ListBorder можно использовать для добавления границы и заполнения для соответствия желаемому результату.

Ответ 3

Вы не сможете увеличить div контейнера, когда он переполняется чистым CSS.

Однако, если вы хотите сохранить свой фактический макет (модель flexbox была бы лучше подходит здесь, как предлагалось @AlecMoore), здесь обходной способ только для webkit: используйте overlay значение для overflow. Он будет отображаться над вашим контентом, чтобы он не скользил вниз.

div{
    width: ...px;        /* Fixed width */
    overflow-y: overlay; /* Overlaying scrollbar for y axis */
}

Здесь демонстрация.

Или вы могли бы просто приспособить свой div, сделать его чуть шире, так что полоса прокрутки поместится в случае необходимости (демонстрация).

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

Примечание для любителей единорога: я люблю котят, но Я предпочитаю единорогов. Я использую котят, потому что я пропустил веб-сайт с образцами с симпатичными единорогами... Скажите, знаете ли вы кого-нибудь!

Ответ 4

Это то, что вы ищете?

http://jsfiddle.net/Z2WuJ/2/

Предоставляя изображения или любое другое содержимое, которое вы помещаете, максимальная ширина 50% (для двух столбцов) и установка размера коробки в рамку-рамку, вы должны получить желаемый результат:

#ListHolder ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    float: left;
    max-width: 50%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

Ответ 5

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

padding-right: 2em;

Ответ 6

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

Итак, ваш div может выглядеть так:

<div class="scroll"> 
    <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>

    <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
</div>

и ваш css:

.scroll {
    overflow-y:auto; /* Only scroll the y axis */
}

Ответ 7

Я думаю, вы должны сделать ширину div, учитывая ширину полосы прокрутки. Добавьте несколько пикселей (30 пикселей), возможно, в ширину div. Затем установите ширину RighList и LeftList примерно на 49%.

overflow-y: auto вызывает перемещение вашего списка, потому что вы не учитываете ширину полосы прокрутки.

Надеюсь, это поможет!

Ответ 8

Я думаю, что ваш лучший снимок будет состоять в том, чтобы всегда отображать полосу прокрутки, даже когда переполнения нет (полоса прокрутки будет деактивирована и активируется, когда содержимое страницы будет больше, чем область просмотра).

Вы можете добиться этого, используя этот код:

html {
    overflow: -moz-scrollbars-vertical; /* For FF */
    -ms-overflow-y: scroll; /* For IE */
    overflow-y: scroll; /* For others & old IE */
}

И здесь работает FIDDLE

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

Обратите внимание: что overflow:overlay; устарел.

Здесь вы идете:

html {
    overflow-y: overlay;
}
#ListHolder {
    display:inline-block;
    width:600px;              /* Fixed width */
}

И вот еще один FIDDLE

Обратите внимание, что оба подхода работают правильно в современных и старых браузерах, таких как большой IE8.

Надеюсь, что это поможет.

Ответ 9

Даже если вы можете настроить ширину DIVs на наличие полосы прокрутки, я бы не рекомендовал ее. Учтите, что пользователь мог настроить размер (ширину) своих полос прокрутки в своей ОС (Windows приходит на ум).

Далее следует, что некоторые браузеры сообщают о ширине окна просмотра с полосой прокрутки, а другие сообщают об этом без. В частности, Chrome и Safari исключают размеры полосы прокрутки, в то время как Firefox, Opera и IE включают размеры прокрутки.

В заключение я согласен с другими ответами, которые вы должны использовать overflow: scroll. Либо это, либо использовать javascript для использования пользовательской полосы прокрутки (что, я думаю, слишком велико).

Материал для чтения:

Ответ 10

DEMO

Просто проверьте демонстрацию и проверьте элемент и удалите высоту из div "#ListHolder". Вы увидите, что ширина будет соответствовать изменению присутствия полосы прокрутки.

Если это то, что вы ищете, дайте мне знать, и я объясню логику этого.

HTML:

<div class="overall-width">
    <div id="ListHolder">
        <ul id="LeftList">
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
        </ul>
        <ul id="RightList">
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
            <img src="http://placehold.it/200x200" />
            </li>
        </ul>
    </div>
</div>

CSS

html {
    overflow: -moz-scrollbars-vertical;
    /* For FF */
    -ms-overflow-y: scroll;
    /* For IE */
    overflow-y: scroll;
    /* For others & old IE */
}
#ListHolder {
    display:inline-block;
    height: 610px;
    overflow: auto;
    width: 100%;
    padding: 10px;
}
#ListHolder > ul {
    -moz-box-sizing: border-box;
    -webki-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #CFCFCF;
    border-radius: 3px;
    display: inline-block;
    margin: 0;
    padding: 20px;
    text-align: center;
    width: 250px;
}
#ListHolder > ul > li {
    display:inline-block;
}
#LeftList {
    float:left;
}
#RightList {
    float:right;
}
body{
    height: 100%;
    margin: 0px;
}
.overall-width{
    width: 600px;
}

Ответ 11

Решение на самом деле довольно просто.

Вам нужен элемент оболочки с display: inline-block. Затем установите ширину дочернего элемента.

var count = 20;
var interval = setInterval(function(){
  document.getElementById('inner').innerHTML += '<p>another line</p>';
    if( --count === 0 )
    clearInterval(interval);
}, 250);
/* important stuff */

#outer {
  display: inline-block;
  height: 150px;
  overflow-y: auto;
}

#inner {
  width: 300px;
}


/* styling */

p {
  margin: 0;
  padding: 20px;
  background: white;
}

#outer {
  padding: 20px;
  outline: 2px solid red;
  background: #ccc;
}

#inner {
  outline: 2px solid red;
}
<div id="outer">
  <div id="inner">
  </div>
</div>

Ответ 12

Возможно, вы можете изменить полосу прокрутки. Что-то вроде этого:

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}
::-webkit-scrollbar-track-piece {
    background: #888
}
::-webkit-scrollbar-thumb {
    background: #eee
}​

Кроме того, здесь вы можете найти IE css