Сделать div прокручиваемым

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

Я хочу, чтобы div оставался максимальным размером 450 пикселей, а затем, если данные увеличиваются, прокрутка будет автоматически. Размер div не должен увеличиваться.

jsfiddle для него.

css:

.itemconfiguration
{
    min-height:440px;
    width:215px;
    /* background-color:#CCC; */        
    float:left;
    position:relative;
    margin-left:-5px;
}

.left_contentlist
{
    width:215px;
    float:left;
    padding:0 0 0 5px;
    position:relative;
    float:left;
    border-right: 1px #f8f7f3 solid;
    /* background-image:url(images/bubble.png); */
    /* background-color: black; */
}

Может ли кто-нибудь помочь мне достичь этого?

Ответы

Ответ 1

Используйте overflow-y:auto для автоматического отображения прокрутки, когда содержимое превышает заданную высоту div.

Смотрите эту демонстрацию

Ответ 2

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

DEMO

 .itemconfiguration
    {
        height: 440px;
        width: 215px;
        overflow: auto;
        float: left;
        position: relative;
        margin-left: -5px;
    }

Ответ 3

Поместите это в свой стиль DIV

переполнения: прокрутки;

Ответ 4

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

Я имею в виду, что вы можете использовать что-то вроде:

.itemconfiguration
{
    // ...style rules...
    height: 25%; //or whatever percentage is needed
    overflow-y: scroll;
    // ...maybe more style rules...
}

Этот метод лучше работает для макетов жидкостей, которые необходимо адаптировать к высоте экрана, на котором они просматриваются, а также работает для свойства overflow-x.

Я также подумал, что стоит упомянуть о различиях в значениях для свойства стиля overflow, поскольку я видел, как некоторые люди использовали auto и другие, используя scroll:

visible= Переполняющий контент не обрезается и сделает div больше, чем установленный height.

скрытый= переполняющий контент обрезается, а остальная часть содержимого, находящаяся за пределами набора height div, будет невидимой

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

auto= Если существует переполненное содержимое, оно обрезается и добавляется строка прокрутки, чтобы увидеть остальную часть содержимого в наборе height div

Ответ 5

Вам нужно удалить

min-height:440px;

к

height:440px;

а затем добавьте

overflow: auto;

для класса требуемого div

Ответ 6

использовать css overflow: прокрутка; имущество. вам нужно указать высоту и ширину, тогда вы сможете прокручивать по горизонтали и по вертикали или по одному из двух прокручивать, установив overflow-x: auto; или overflow-y: auto;

Ответ 7

Вам следует добавить свойство переполнения, например следующее:

.itemconfiguration
    {   
        height: 300px; 
        overflow-y:auto;
        width:215px;
        float:left;
        position:relative;
        margin-left:-5px;
    }