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

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

Каким должен быть мой 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;
 }
4b9b3361

ОТВЕТЫ

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