Scrollbar bez stałej wysokości/wysokość dynamicznych z przewijania

Question

mam tej struktury 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> 

chcę mieć trzy części wewnątrz głównej części (#body) bez przelewu. Potrzebuję paska przewijania w środkowej części.

Próbowałem to CSS:

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

a to:

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

Ale żaden z nich nie działa.

Zrobiłem przykład na JSFiddle.

Czy mogę to zrobić tylko z CSS i HTML? Wolałbym unikać JavaScript.

Answer 1

schematu flexbox to nowoczesna alternatywa, która pozwala to zrobić bez ustalonych wysokościach lub JavaScript

Ustawianie display: flex; flex-direction: column; na pojemniku i flex-shrink: 0; w nagłówku i stopce. dIV załatwia sprawę:

http://jsfiddle.net/cvmrvfhm/1/

Answer 2

Nie wiem, czy dobrze to rozumiem, ale czy this rozwiązuje problem?

Właśnie zmienił overflow-y: scroll;

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

Zmieniano

Następnie spróbuj użyć wartości procentowe tak: http://jsfiddle.net/6WAnd/19/

CSS markup:

#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%; 
} 

Answer 3

Użyj tego:

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

Answer 4

Trzeba będzie określić stałą wysokość, nie można użyć 100%, ponieważ nie ma nic do tego, aby być w porównaniu do, jak w height=100% czego?

Edited skrzypce:

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

Answer 5

JS odpowiedź na to pytanie brzmi:

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

lub coś podobnego

Answer 6

Szybkie, czyste podejście przy użyciu bardzo małych JS i Wyściółka CSS: http://jsfiddle.net/benjamincharity/ZcTsT/14/

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

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

Answer 7

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

oto kod css

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

oto demo JSFIDDLE

Answer 8

Użyj tego:

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

tto uniknąć stałą heigh