overflow (scroll) - 100% container height
Here's CSS styling to accomplish this:
#container { width: 500px; border: 3px solid red; margin: 0 auto; position: relative;}
#sidebar { position: absolute; left: 0; top: 0; width: 150px; height: 100%; background-color: yellow; overflow-y: scroll;}
#main { margin-left: 150px;}
p, ul { padding: 10px;}<div id="container"> <div id="sidebar"> <ul> <li> line 1 </li> <li> line 2 </li> <li> line 3 </li> <li> line 4 </li> <li> line 5 </li> <li> line 6 </li> <li> line 7 </li> <li> line 8 </li> <li> line 9 </li> <li> line 10 </li> <li> line 11 </li> <li> line 12 </li> <li> line 13 </li> <li> line 14 </li> <li> line 15 </li> <li> line 16 </li> <li> line 17 </li> <li> line 18 </li> <li> line 19 </li> <li> line 20 </li> </ul> </div> <div id="main"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div></div>How To Make Div With 100% Height Extend into Scroll Overflow in HTML/CSS?
It is very good for your task to use the rules of flexibility. Add display: flex and flex-flow: wrap for #container. And remove the height: 100% from the children, because flex-flow: wrap itself will stretch the elements to the full height.
Also, remove float: left and overflow: visible from children.
#container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll;
color: white;
background: gray;
display: flex;
flex-flow: wrap;
}
#part1 {
width: 50%;
margin: 0;
background: blue;
/*height: 100%;
float: left;
overflow: visible;*/
}
#part2 {
width: 50%;
margin: 0;
background: green;
/*height: 100%;
float: right;
overflow: visible;*/
}<div id="container">
<div id="part1" contenteditable="true"></div>
<div id="part2" contenteditable="true"></div>
</div>Making scrollable div 100% height of parent container
Try this:
Check Demo Here
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row table-row">
<div class="col-sm-6 table-col">nav</div>
<div class="col-sm-6 table-col" style="border: 1px solid red;">
<div id="eventsContainer">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
/*border: 1px solid red;*/
}
nav.navbar {
margin: 0;
}
.table-row {
height: calc(100vh - 53px);
display: flex;
}
.table-col {
display: flex;
width: 100%;
}
#eventsContainer {
height: 100%;
overflow: auto;
position: absolute;
width: calc(100% - 15px);
}
I checked in firefox, chrome and IE(edge), it works..
I hope this helps you
Unexpected css overflow when padding inside 100% height container
in .main and .side change your height from 100% to height:auto; and it should give you your desired outcome.
Fiddle: https://jsfiddle.net/caq8ojs9/
Or you could also simply change your overflow: auto; to overflow: hidden; in .content
CSS: Make Absolute item in Overflow-Y always fill 100% of Scroll Height
I would make a #container-inner element and place the content within that.
Or is this the solution you're referring to as "hacky"?
#container {
height: 300px;
overflow-y: scroll;
background-color: #333;
}
#container-inner {
position: relative;
}
#item {
position: absolute;
left: 50px;
width: 2px;
background-color: lightgreen;
height: 100%;
}<div id="container">
<div id="container-inner">
<div id="item"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>Vertical scroll on 100% height div
That´s because you need a heigth for .content-table try including this CSS height: calc(100% - 100px);
Div 100% height scroll
Using min-height: 100% instead of height: 100% should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/
Make flex item have 100% height and overflow: scroll
The main problem you are having is a violation of the rules governing percentage heights in CSS.
Basically, when using percentage heights, you must always specify the height of the parent element. Otherwise, the element with a percentage height has no frame of reference, and the height computes to auto (the height of the content).
From the spec:
CSS
heightpropertypercentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".auto
The height depends on the values of other properties.source: https://www.w3.org/TR/CSS21/visudet.html#propdef-height
So if you plan to use percentage heights, you need to specify a height on every parent element up to the root element (html) or up to a fixed height declaration (such as height: 250px).
In your CSS, you have body { min-height: 100%; }. However, there is no height specified on the parent (html).
The following parent elements in your code are missing a height declaration:
htmlbody(min-heightdoesn't count).wrapper#chatContainer
With the following adjustments your layout works.
html { height: 100%; } /* NEW */
body {
display: flex;
flex-direction: column;
/* min-height: 100%; */
margin: 0px;
height: 100%; /* NEW */
}
.wrapper {
display: block;
flex: 1 1 auto;
display: flex;
flex-direction: row;
height: 100%; /* NEW */
}
#chatContainer {
background: orange;
width: calc(100% - 350px);
display: flex;
flex-direction: column;
height: 100%; /* NEW */
}
Revised Fiddle
It's also worth mentioning some variations among current browsers.
Percentage Heights: Chrome/Safari vs Firefox/IE
Although the traditional implementation of percentage heights uses the value of the height property, recently some browsers have broadened their scope.
As evidenced in the following posts, Firefox and IE are now also using flex heights to resolve the percentage height of child elements.
- Chrome / Safari not filling 100% height of flex parent
- Height is not correct in flexbox items in Chrome
- Flexbox in Chrome--How to limit size of nested elements?
- Chrome ignoring flex-basis in column layout
Bottom line: Chrome and Safari resolve percentage heights based on the value of the parent's height property. Firefox and IE11/Edge use the parent's computed flex height.
For now, the simplest cross-browser solution to this problem would be, in my view, using the height property across the board for percentage heights.
Div overflowing container div with height: 100%, overflow: hidden breaks scroll-y
In case anyone wants to know, using a lot of flex boxes fixed my problem.
Here's a codepen by /u/bonhone of reddit who solved it:
http://codepen.io/anon/pen/gpjReQ
display: flex;
flex-grow: 1;
are the magic css lines I used. :)
Related Topics
Calculating Square-Roots with CSS
How to Make a Bullet List Align with Text in CSS
Difference Between Box and Grid in Material-Ui
Gulp SASS - How to Properly Name The Output CSS
Lesscss Method with Ie Filter Alpha Opacity CSS
How to Use CSS Variables in Twitter-Bootstrap 4 $Theme-Colors Array
Bootstrap Container-Fluid - Remove Margins The Right Way (Overflow)
Using CSS Variables as SASS Function Arguments
Overriding Google Recaptcha CSS to Make It Responsive
How to Stretch a Div to 100% Page Height
What Font Format Should I Use for My Site
Customize CSS of Google Docs Viewer
CSS: Placing an Arrow/Triangle with Border on The Top of My Drop Down Menu