Scrollbar without fixed height/Dynamic height with scrollbar
HtmlCssScrollbarHtml Problem Overview
I have this HTML structure:
<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>
I want to have the three parts inside the main part (#body) without overflow. So I need a scroll bar in the middle part.
I tried this CSS:
#content{
border: red solid 1px;
overflow-y: auto;
}
And this:
#content{
border: red solid 1px;
overflow-y: auto;
height: 100%;
}
But neither of them work.
I made an example at JSFiddle.
Can I do this with only CSS and HTML? I'd prefer to avoid Javascript.
Html Solutions
Solution 1 - Html
Flexbox is a modern alternative that lets you do this without fixed heights or JavaScript.
Setting display: flex; flex-direction: column; on the container and flex-shrink: 0; on the header and footer divs does the trick:
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>
</div>
</div>
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;
}
Solution 2 - Html
I have Similar issue with PrimeNG p_Dialog content and i fixed by below style for the contentStyle
height: 'calc(100vh - 127px)'
Solution 3 - Html
Use this:
style="height: 150px; max-height: 300px; overflow: auto;"
fixe a height, it will be the default height and then a scroll bar come to access to the entire height
Solution 4 - Html
<div id="scroll">
<p>Try to add more text</p>
</div>
here's the css code
#scroll {
overflow-y:auto;
height:auto;
max-height:200px;
border:1px solid black;
width:300px;
}
here's the demo JSFIDDLE
Solution 5 - Html
You will have to specify a fixed height, you cannot use 100% because there is nothing for this to be compared to, as in height=100% of what?
Edited fiddle:
Solution 6 - Html
A quick, clean approach using very little JS and CSS padding: http://jsfiddle.net/benjamincharity/ZcTsT/14/
var headerHeight = $('#header').height(),
footerHeight = $('#footer').height();
$('#content').css({
'padding-top': headerHeight,
'padding-bottom': footerHeight
});
Solution 7 - Html
extending @mtyaka answer of using flexbox, if your scrollable is deep down in dom, need to use overflow: auto/hidden for all parent elements till we get a fixed height
jsfiddle https://jsfiddle.net/rohilaharsh/cuazdnkh/1/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Container</title>
</head>
<body>
<div class="one">
One
<div class="two">
Two
<div class="three">
Three
<div class="table">
Table
<div class="header">Table Header</div>
<div class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure maiores corporis quisquam enim at nam earum non atque dolorum nulla quidem perferendis, porro eveniet! Quisquam, fugit ex aspernatur, aliquid necessitatibus amet aperiam pariatur facilis suscipit ea dolorum qui ratione assumenda eum minima. At a ullam magnam eveniet, hic sit quis dicta perferendis excepturi nemo voluptate ipsum doloremque expedita illo dolor voluptates culpa consequuntur quaerat porro reprehenderit ab alias! Maxime reprehenderit nihil doloribus exercitationem, cupiditate quasi dolorum voluptas repellendus vel fugit incidunt praesentium molestias modi numquam! Quo porro laudantium aperiam suscipit, molestiae quibusdam veniam cum nam fuga facere fugit quisquam distinctio!</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
html, body, .one,.two,.three,.table {
display: flex;
flex-direction: column;
/* important */
overflow: hidden;
flex: 1;
margin: 0;
}
.body {
width: 200px;
overflow: auto;
}
Solution 8 - Html
With display grid you can dynamically adjust height of each section.
#body{
display:grid;
grid-template-rows:1fr 1fr 1fr;
}
Add the above code and you will get desired results.
Sometimes when many levels of grids are involved css wont restrict your #content to 1fr. In such scenarios use:
#content{
max-height:100%;
}
Solution 9 - Html
Use this:
#head {
border: green solid 1px;
height:auto;
}
#content{
border: red solid 1px;
overflow-y: scroll;
height:150px;
}
Solution 10 - Html
I don't know if I got it right, but does this solve your problem?
I just changed the overflow-y: scroll;
#content{
border: red solid 1px;
overflow-y: scroll;
height: 100px;
}
Edited
Then try to use percentage values like this: 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%;
}