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

Полоса прокрутки без фиксированной высоты/Динамическая высота с полосой прокрутки

У меня есть эта структура HTML:

<div id="body">
    <div id="head">
        <p>Dynamic height without scrollbar</p>
    </div>
    <div id="content">
        <p>Dynamic height with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed height without scrollbar</p>
    </div>  
</div>

Я хочу иметь три части внутри основной части (#body) без переполнения. Поэтому мне нужна полоса прокрутки в средней части.

Я пробовал этот CSS:

#content{
    border: red solid 1px;
    overflow-y: auto;
}

И это:

#content{
    border: red solid 1px;
    overflow-y: auto;
    height: 100%;
}

Но ни один из них не работает.

Я сделал пример в JSFiddle.

Могу ли я сделать это только с помощью CSS и HTML? Я бы предпочел избежать Javascript.

4b9b3361

ОТВЕТЫ

Ответ 1

Flexbox - это современная альтернатива, которая позволяет вам делать это без фиксированной высоты или JavaScript.

Установка display: flex; flex-direction: column; в контейнере и flex-shrink: 0; в верхних и нижних колонтитулах делает свое дело:

HTML:

<div id="body">
    <div id="head">
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>  
    </div>
    <div id="content">
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed size without scrollbar</p>
        <p>Fixed size without scrollbar</p>

CSS:

#body {
    position: absolute;
    top; 150px;
    left: 150px;
    height: 300px;
    width: 500px;
    border: black dashed 2px;
    display: flex;
    flex-direction: column;
}

#head {
    border: green solid 1px;
    flex-shrink: 0;
}

#content{
    border: red solid 1px;
    overflow-y: auto;
    /*height: 100%;*/
}

#foot {
    border: blue solid 1px;
    height: 50px;
    flex-shrink: 0;
}
    </div>  
</div>

Ответ 2

Используйте это:

style = "max-height: 300px; overflow: auto;"

Чтобы избежать фиксированного уровня

Ответ 3

Вам нужно указать фиксированную высоту, вы не можете использовать 100%, потому что для этого нечего сравнивать, как в height=100% того, что?

Отредактированная скрипка:

http://jsfiddle.net/6WAnd/4/

Ответ 4

 <div id="scroll">
    <p>Try to add more text</p>
 </div>

здесь код css

#scroll {
   overflow-y:auto;
   height:auto;
   max-height:200px;
   border:1px solid black;
   width:300px;
 }

здесь демо JSFIDDLE

Ответ 6

Быстрый, чистый подход, используя очень небольшое дополнение JS и CSS: http://jsfiddle.net/benjamincharity/ZcTsT/14/

var headerHeight = $('#header').height(),
    footerHeight = $('#footer').height();

$('#content').css({
  'padding-top': headerHeight,
  'padding-bottom': footerHeight
});

Ответ 7

Используйте это:

#head {
    border: green solid 1px;
    height:auto;
}    
#content{
            border: red solid 1px;
            overflow-y: scroll;
            height:150px;       
        }

Ответ 8

У меня есть аналогичная проблема с содержимым PrimeNG p_Dialog, и я исправил ниже стиль для contentStyle

height: 'calc(100vh - 127px)'

Ответ 9

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

#body{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
}

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

Иногда, когда задействовано много уровней сетки, css не ограничит ваш #content значением 1fr. В таких сценариях используют:

#content{
  max-height:100%;
}

Ответ 10

Если вы хотите иметь вертикальную прокрутку, вам нужно в определенной степени задействовать фиксированную высоту. Если вы не хотите устанавливать фиксированную высоту для рассматриваемого элемента или его родителя, есть еще один вариант - установить фиксированную высоту для его братьев и сестер. Итак, в итоге вы скажете несколько братьев и сестер с высотой 200px, и ваш элемент будет иметь height: calc(100% - 200px); Таким образом, вы делаете динамическую высоту вашего элемента и получаете то, что требуется, чтобы использовать overflow-y: auto; и получить желаемый свиток.

<div id="body">
<div id="head">
    <p>Fixed size without scrollbar</p>
    <p>Fixed size without scrollbar</p>
</div>
<div id="content">
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
    <p>Dynamic size with scrollbar</p>
</div>
<div id="foot">
    <p>Fixed size without scrollbar</p>
    <p>Fixed size without scrollbar</p>
</div>  


#body {
    width: 300px;
    border: black dashed 2px;
    height: 400px; /*this is need only for the sake of the example. 
In the real code you will have height set by some ascendant element or 
at last throght the chain by the window  */
    overflow: hidden;
}
    
#head {
    height: 150px;
    background: red;
}

#content{
    overflow-y: auto;
    height: calc(100% - 200px)
}

#foot {
    height: 50px;
    background: blue;
}

Ответ 11

Я не знаю, правильно ли я понял, но this решить вашу проблему?

Я только что изменил overflow-y: scroll;

#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 100px;
}

Edited

Затем попробуйте использовать процентные значения следующим образом: http://jsfiddle.net/6WAnd/19/

Разметка CSS:

#body {
    position: absolute;
    top; 150px;
    left: 150px;
    height: 98%;
    width: 500px;
    border: black dashed 2px;
}    
#head {
    border: green solid 1px;
    height: 15%;
}
#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 70%;
}
#foot {
    border: blue solid 1px;
    height: 15%;
}