Related
[UPDATE], bug filed : https://bugs.chromium.org/p/chromium/issues/detail?id=1011866&q=pointer-events&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
I realised that now on Chrome 78.0.3904, (Android 9), applying pointer-events:none to a fixed position overlaying element is preventing the elements underneath from being scrolled.
I employ this technique alot in the sites i make and its been working fine till i realised that this is broken today. But it still works fine on all other devices and browsers. Safari on IOS for example.
I did a simple test that i attached below, and you can try on android chrome browsers to see the issue.
Heres also an external url with the same test : https://www.fariskassim.com/stage/rebel9/democracy_museum/sandbox/chrome_bug/
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(255, 0, 0, 0.5);
pointer-events: none;
}
.scrollable_content {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;;
overflow:auto;
}
<div class="overlay"></div>
<div class="scrollable_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet justo at sapien vulputate, dictum pellentesque turpis ultricies. Quisque pellentesque maximus ultrices. Vivamus tempus sem vehicula varius laoreet. Donec gravida sit amet lorem ac molestie. Nunc eget lobortis turpis. Praesent fringilla quam non ligula bibendum, vel consectetur orci lobortis. Morbi a efficitur augue. Donec in nisl pellentesque, scelerisque arcu non, dictum augue.
Nam purus augue, auctor vitae purus et, gravida viverra velit. Vivamus a massa euismod, luctus leo sed, maximus eros. Phasellus egestas varius euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pretium magna a justo vestibulum, mattis efficitur enim consequat. Nunc malesuada leo sed turpis rhoncus cursus. Phasellus mollis elementum magna ac varius.
Sed varius dui non leo fermentum, eu aliquet risus bibendum. Duis ac diam tellus. Nullam eleifend sed dui eu iaculis. Nulla nec ultrices turpis, at tempor enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam venenatis porttitor mauris, et consequat tortor euismod quis. Donec at tortor convallis, convallis urna eu, fermentum justo.
Cras egestas, turpis eget sodales egestas, lacus erat hendrerit diam, id dapibus augue enim sit amet justo. Nullam a augue ac diam convallis placerat at id lacus. In eu ipsum dui. Nunc lacinia molestie ligula, id suscipit erat. Praesent euismod eget nunc non facilisis. Aenean quis ipsum egestas, dictum sem sit amet, vestibulum arcu. Phasellus pretium id sem a euismod. Fusce eu ornare purus. Vestibulum porttitor augue a suscipit volutpat. Curabitur sodales urna libero, sed posuere odio lacinia ut. Cras quis mauris augue.
Ut augue quam, elementum non ante in, blandit lacinia ex. Vestibulum in lectus pulvinar, faucibus nisi tincidunt, placerat dolor. Ut lacinia risus nunc, eget blandit dolor malesuada in. Donec at urna ac orci pulvinar lobortis. Donec aliquet ex nec faucibus suscipit. Nulla libero arcu, efficitur ut elit vel, congue egestas massa. Etiam laoreet odio leo, ut vehicula nunc consequat fringilla. Nam arcu mauris, vehicula sed sagittis a, sodales et felis. Pellentesque in hendrerit orci. Sed ornare tristique turpis sed ultrices.
Aliquam mollis mi sit amet ex lacinia, sed sollicitudin ipsum efficitur. Ut elementum vulputate luctus. Duis id mollis eros. Praesent pellentesque, augue nec vestibulum finibus, est elit faucibus quam, eu condimentum dui mi at erat. Duis varius ullamcorper auctor. Suspendisse potenti. Mauris quis justo venenatis, lacinia diam eu, gravida augue. Ut in magna arcu. Etiam nec arcu ex. Phasellus ut nibh leo. Proin consectetur lacus risus, et sodales nisi luctus placerat. Maecenas eget fringilla sem, vitae sagittis nisi. Mauris et maximus velit. Fusce a velit sed quam porttitor suscipit vitae nec lectus.
Nulla lobortis ligula condimentum elit pellentesque vulputate. Aenean ac nisl in metus tincidunt viverra. Integer risus urna, fringilla ac metus ac, congue feugiat nulla. Donec dui risus, gravida eu tempor iaculis, vulputate at ante. Donec cursus elit ac ipsum pretium, non dapibus arcu vehicula. Nulla porttitor urna a lectus molestie, vitae dictum enim varius. Sed justo turpis, rhoncus eget tortor ut, rhoncus condimentum ante. Nulla erat est, interdum pulvinar diam vitae, fringilla interdum risus. Donec maximus, nisl ac tristique tincidunt, lacus metus posuere nisl, a viverra ante dolor in libero. Donec eleifend congue lectus. Maecenas sed mattis nisl. Vivamus lectus eros, interdum eu congue quis, fermentum at odio. Nullam maximus ligula in posuere viverra. Donec vitae consequat nisi. Fusce nibh ex, aliquam et erat a, varius congue nisi.
Integer tristique sodales enim at ultrices. Integer at lobortis felis. Maecenas et justo imperdiet justo tempor dapibus. Donec convallis tortor sit amet commodo condimentum. Sed maximus ipsum nec sapien cursus, id molestie est sodales. Curabitur nisi justo, scelerisque vitae sagittis at, ultricies at odio. Nulla commodo libero eros, quis convallis tortor finibus quis. Vivamus ipsum lorem, tristique eu lobortis vitae, imperdiet sit amet ipsum. Sed eget volutpat lacus. Phasellus sit amet sapien lacus. Mauris sollicitudin facilisis sapien, bibendum ornare libero ultricies non. Vivamus magna augue, maximus vitae turpis vitae, tincidunt ornare magna. Donec aliquet diam nec lobortis imperdiet. Sed non tellus a est laoreet pharetra. Donec eleifend porta nisl, ac euismod elit fermentum at.
Vestibulum maximus dui sed nisi sollicitudin, quis lacinia lectus viverra. Praesent dictum viverra ipsum ut finibus. Proin eget accumsan nulla. Nulla finibus viverra orci, a rhoncus enim condimentum vitae. Vivamus lacinia eros ante, in pellentesque diam sodales sit amet. Ut ut nibh ex. Proin aliquet ornare erat. Suspendisse ullamcorper condimentum libero nec molestie. Quisque fringilla lectus neque, at suscipit ex congue nec. Nullam accumsan vitae nisi eget lobortis. Pellentesque quis imperdiet dui, non porttitor ante. Mauris ipsum ante, accumsan commodo vulputate ut, fringilla id mauris. Duis pretium vulputate sapien sit amet sodales.
</div>
Yes!! Maybe new Chrome version not supporting this technique. Make a try with following code snippet:
.scrollable_content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 11;
opacity: .8;
}
I don't think this may give the same output as you defined, but it looks somewhat better.
Context
I'm making a website that allows to create csgo bind/config files, so I splited the page in half : on the left, inputs from user, on the right, the configuration result.
I have one button, at the end of the each panel, to compute inputs and to download the file, but I would like to keep them visible all time (currently, they are at the bottom of the page, i need to scroll to find them).
For one panel, we have :
As the title and the button have "known" position, is there a way to extend the lorem ipsum div, pushing the button to the bottom of the panel, without overflowing the screen ?
I don't want to use absolute attributes, in anticipation of an adaptation for smaller screens (at that time, the two panels will be located one below the other).
I have try some stuff with flex-grow, nothing convincing.
I don't have any defined height for the lorem ipsum div; I want to cover the maximum of the panel, without overflowing it.
Here is some simplified code :
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
Make each of you panel elements a column flexbox with height: 100% (also consider border-box to including padding in height).
Now just add min-height: 0 to wrapper element - see demo below:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
min-height: 0; /* added */
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
display: flex; /* added */
height: 100%; /* added */
flex-direction: column; /* added */
box-sizing: border-box; /* added */
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - you can see some examples of this:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Added the following CSS to your lorem id:
#lorem {
height: 80%;
overflow-y: auto;
}
Also to your panel: max-height: 100%;
Key part here is overflow-y: scroll. This works as long as you have a height defined. Since you want the content of your lorem to be relative to your panel, you can use a % height, in this case 80% seems to fit nicely between your title and button.
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#lorem {
height: 80%;
overflow-y: scroll;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
max-height: 100%;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
</body>
</html>
When using flexbox, it's important that you specify exactly what you want for each element. You've said you don't want a height on #lorem but you have to specify a height somewhere in order to get the results you want, I specified it with h1 and #wrapper. I believe this is the result you're looking for, take a look at the fiddle.
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
h1 {
height: 20%;
}
#lorem {
overflow-y: scroll;
}
#wrapper {
height: 80%;
display: flex;
flex-direction: row;
}
.panel {
padding: 1em;
width: 50%;
display: flex;
flex-direction: column;
}
You can make use of jquery to identify the dynamic height of the panel.
function resizeElement(id){
var win= window.outerHeight;
var title= $("#title").outerHeight();
var extraPadding= 32;
var height= win- (title+extraPadding);
$("#lorem").css("max-height", height+ "px");
}
resizeElement('left');
resizeElement('right');
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
max-height: 50%;
overflow-y: auto;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="footer">
<input type="button" value="Press Me 1">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div id="footer">
<input type="button" value="Press Me 2">
</div>
</div>
</div>
</body>
</html>
I'm trying to create a layout that looks like this:
The nav and content panes should have independent vertical scrollbars.
I managed to get most of it working. But the "nav" div is not showing the scrollbar, even if overflow is set to scroll.
How can I get the vertical scrollbar to show? If possible I'd like to get this done without the use of JS plugins
body {
height:95%;
width:95%
}
#header {
position: absolute;
top: 0px;
left: 0px;
height: 80px;
right: 0px;
overflow:hidden;
margin: 10px;
border-bottom: 1px solid black
}
#footer {
position: absolute;
bottom: 0px;
height: 80px;
left: 0px;
right: 0px;
overflow: hidden;
margin: 10px;
border-top: 1px solid black
}
#content {
position: absolute;
top: 90px;
bottom: 90px;
left: 160px;
right: 0px;
overflow-y: scroll;
}
#nav {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
right: 0px;
overflow-y: scroll
}
<body>
<div id="header">
<p>HEADER</P>
</div>
<div id="nav" style="">
<ul>
<li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li>
</ul>
</div>
<div id="content" style="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in convallis turpis, pellentesque faucibus odio. Aliquam sem neque, posuere vitae suscipit ut, tincidunt congue arcu. Suspendisse blandit sodales enim, nec eleifend nisl cursus nec. Phasellus interdum ante nunc, in porta arcu bibendum id. In hac habitasse platea dictumst. Maecenas a congue nisi, a pellentesque mi. Mauris imperdiet orci vitae enim fringilla, at feugiat diam vehicula. Ut volutpat, leo vitae congue sagittis, justo mi fermentum lacus, et finibus arcu ligula at lacus. Nunc a scelerisque tortor, at congue ante. Ut vel nibh ultrices, tempus purus auctor, hendrerit dolor. Pellentesque tempus, lacus vitae hendrerit consectetur, nulla diam venenatis quam, porta gravida leo nulla eget justo.</p>
<p>Sed finibus iaculis sem, nec suscipit nunc. Suspendisse pellentesque est tellus, ut consequat magna dictum ut. Sed orci enim, ultrices bibendum justo vitae, tristique fringilla orci. Nullam semper arcu quam, ut facilisis massa semper ut. Donec dictum porttitor erat et molestie. Proin ac justo dapibus, luctus velit vestibulum, eleifend tellus. Morbi ac molestie est, ut pellentesque nibh. Nunc at venenatis velit. Nullam scelerisque laoreet magna volutpat pellentesque. Donec a tincidunt metus, a mollis neque. Etiam urna mauris, dapibus sed felis et, consequat ultrices ligula. Nullam vitae bibendum lacus, eu condimentum sapien. Nunc sollicitudin sit amet eros at cursus. Duis gravida eros turpis, eu venenatis nibh vulputate vel.</p>
<p>Nulla augue nisi, iaculis non massa at, varius lacinia nibh. Suspendisse congue arcu leo, a placerat nisl rhoncus eu. Quisque augue ipsum, accumsan a nulla et, sodales porttitor eros. Integer nec cursus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tempus magna urna, eget egestas purus hendrerit eu. Fusce in velit euismod, sodales libero feugiat, auctor mauris. In hac habitasse platea dictumst. Donec ornare commodo massa. Integer ut urna arcu. Cras maximus, mi in tristique auctor, lorem ipsum semper mauris, nec tincidunt nisl turpis et justo. Donec vitae purus aliquet ex porta vestibulum at nec magna. Pellentesque varius vehicula ante vitae dictum. Sed quis justo eget tellus commodo porta a in felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Integer vestibulum mollis magna, id tincidunt diam condimentum vel. Cras lacinia quam vel tincidunt dictum. Donec interdum nec magna vel pharetra. Suspendisse et tempor neque, et rutrum velit. Ut ligula lacus, commodo ut mollis quis, auctor faucibus magna. Morbi feugiat hendrerit libero id elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pulvinar sapien ac finibus condimentum. Etiam rutrum auctor elementum. Sed hendrerit, neque eget vehicula dignissim, justo dolor blandit ipsum, eget gravida purus erat vitae nisi. Phasellus in tellus tincidunt, interdum diam id, dictum mauris.</p>
<p>Fusce mattis convallis suscipit. Nam aliquam risus tincidunt arcu aliquam efficitur. Nulla euismod sed ligula quis bibendum. Sed felis dolor, dignissim ac aliquam vitae, maximus eget augue. Proin eu ligula vitae nisi accumsan convallis eget eu erat. Vivamus laoreet arcu dignissim pulvinar dapibus. Vivamus laoreet lorem nec faucibus molestie. Phasellus sit amet bibendum ligula. Pellentesque at augue felis. Nulla luctus dapibus dui eu maximus. Proin sapien quam, scelerisque id egestas vel, efficitur id arcu. Vestibulum pellentesque lectus in rhoncus egestas. Ut a pellentesque arcu, vel ultrices augue. Praesent viverra urna laoreet sem lobortis dapibus. Aliquam mauris odio, maximus vel risus imperdiet, consequat accumsan odio.</p>
<p>Aenean gravida metus eu orci egestas, vitae venenatis ligula faucibus. Fusce eget eros vitae nibh porta pretium. Sed nulla quam, commodo id interdum nec, blandit sed ligula. Duis sed ante eleifend velit tempus porttitor vel sit amet diam. Donec tempus sollicitudin urna quis interdum. Nunc mattis in elit sed volutpat. Maecenas laoreet elit a metus fringilla molestie. Etiam vel rhoncus risus.</p>
<p>Fusce nec dignissim dolor. Aenean venenatis enim a condimentum venenatis. Duis viverra, risus quis auctor venenatis, velit dui mollis mauris, quis fermentum mauris leo eu nunc. Aenean ultrices justo ac metus pretium laoreet. Aliquam mattis nisi arcu, at pretium magna tempus id. Donec elementum turpis eget ligula semper faucibus. Cras erat felis, ornare vitae convallis eu, faucibus in erat. Aliquam porttitor rutrum massa, quis consectetur nulla aliquet eu. Duis ut diam eu nulla finibus vehicula eget ac augue. Ut urna ante, varius a metus ut, sollicitudin eleifend sapien. Morbi facilisis pretium sem. Suspendisse dapibus augue leo, nec dignissim lacus lacinia et.</p>
<p>Etiam laoreet in tortor a rhoncus. Pellentesque eget maximus lectus. Etiam tristique arcu a leo commodo rhoncus. Aliquam non sem a quam consectetur ultricies id non felis. Vestibulum commodo, risus in lacinia dictum, diam libero tincidunt magna, ac viverra elit velit eget orci. Nullam dolor risus, blandit eget nunc non, ultrices consequat tortor. Sed in odio tincidunt, mollis urna sit amet, condimentum enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla consectetur dignissim odio id imperdiet. Maecenas semper pellentesque dignissim. Cras urna tellus, auctor vel tincidunt non, eleifend in diam. In rhoncus nisi dolor. Donec sed posuere enim, nec dapibus orci. Nullam metus lectus, interdum eget mollis a, fringilla non quam. Fusce sollicitudin neque vitae commodo sodales. Suspendisse potenti.</p>
<p>Sed sed turpis sagittis, varius nunc quis, elementum nibh. Etiam eget scelerisque ex, sit amet hendrerit nulla. Nam eleifend pharetra ipsum, id pretium nibh imperdiet quis. In hac habitasse platea dictumst. Ut mattis, turpis sed auctor efficitur, metus eros scelerisque tortor, eget rhoncus erat urna ut tellus. Integer id nisi sapien. Phasellus non rutrum nunc, nec molestie nisl. Suspendisse quis enim blandit, efficitur urna pellentesque, vehicula nulla. Aenean rhoncus sem non elit tristique vestibulum eget ac erat. Nunc vestibulum odio libero. Donec sit amet iaculis lacus. Duis vel sodales enim. Sed et ultrices dolor, sit amet vehicula magna.</p>
<p>Pellentesque sem turpis, mollis vitae ligula a, venenatis tristique augue. In hac habitasse platea dictumst. Morbi et felis vel turpis efficitur fermentum eu in libero. Mauris bibendum ligula sapien, non eleifend nisl interdum ac. Duis pharetra lorem nibh, vitae aliquam neque bibendum a. Ut eu scelerisque erat, et dignissim metus. Vivamus egestas fermentum magna at commodo. In sodales velit in ante suscipit consequat. Vivamus porttitor nisl at lectus vestibulum, et porta dui volutpat. Phasellus sit amet dui quis diam auctor maximus et ac massa. Integer tempor eu mauris non facilisis. Donec et rhoncus ligula, vitae interdum purus. Nulla vel tellus ex.</p>
<p>Cras magna orci, imperdiet at euismod eu, ullamcorper id tortor. Vivamus eget elit elementum, porta mi quis, mollis sem. In ac risus id nunc eleifend tincidunt a commodo mi. In quis dictum purus. Quisque molestie aliquam ex, quis feugiat mi porta ut. Suspendisse feugiat condimentum quam, ac dapibus velit convallis sed. Donec sed enim cursus, tincidunt mauris nec, dictum dui. Nulla vel diam dictum, ultricies ligula eget, porta mauris. Nullam ante metus, sagittis at mauris eu, mattis blandit dolor. Vivamus bibendum auctor orci. Pellentesque pellentesque tincidunt dui ut rutrum.</p>
<p>Donec consequat lacus eget imperdiet euismod. Suspendisse in ligula nisi. Nulla facilisi. Nam lacus nulla, tempus sit amet cursus convallis, malesuada eu felis. Curabitur non urna justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt est ut urna accumsan auctor. Aliquam pretium rutrum diam, ut interdum libero. In eget tempus ligula. Etiam risus dui, sollicitudin id ipsum eget, iaculis tempus libero. Aenean commodo euismod felis eu faucibus. Nulla facilisis at metus sed malesuada. Duis gravida consequat accumsan. Cras mollis purus in nunc pharetra lacinia. Nunc varius nisl a enim egestas, in facilisis enim tincidunt.</p>
</div>
<div id="footer">
<p>FOOTER</P>
</div>
</body>
your #nav element is too wide. the scrollbar is getting hidden;
#nav {
width:160px;
}
Try setting width for both content and nav in percentage values.
#content {
position: absolute;
top: 90px;
bottom: 90px;
width: 80%;
right: 0px;
overflow-y: scroll;
}
#nav {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
width: 20%;
overflow-y: scroll
}
body {
height:95%;
width:95%
}
#header {
position: absolute;
top: 0px;
left: 0px;
height: 80px;
right: 0px;
overflow:hidden;
margin: 10px;
border-bottom: 1px solid black
}
#footer {
position: absolute;
bottom: 0px;
height: 80px;
left: 0px;
right: 0px;
overflow: hidden;
margin: 10px;
border-top: 1px solid black
}
#content {
position: absolute;
top: 90px;
bottom: 90px;
width: 80%;
right: 0px;
overflow-y: scroll;
}
#nav {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
width: 20%;
overflow-y: scroll
}
<body>
<div id="header">
<p>HEADER</P>
</div>
<div id="nav" style="">
<ul>
<li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li>
</ul>
</div>
<div id="content" style="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in convallis turpis, pellentesque faucibus odio. Aliquam sem neque, posuere vitae suscipit ut, tincidunt congue arcu. Suspendisse blandit sodales enim, nec eleifend nisl cursus nec. Phasellus interdum ante nunc, in porta arcu bibendum id. In hac habitasse platea dictumst. Maecenas a congue nisi, a pellentesque mi. Mauris imperdiet orci vitae enim fringilla, at feugiat diam vehicula. Ut volutpat, leo vitae congue sagittis, justo mi fermentum lacus, et finibus arcu ligula at lacus. Nunc a scelerisque tortor, at congue ante. Ut vel nibh ultrices, tempus purus auctor, hendrerit dolor. Pellentesque tempus, lacus vitae hendrerit consectetur, nulla diam venenatis quam, porta gravida leo nulla eget justo.</p>
<p>Sed finibus iaculis sem, nec suscipit nunc. Suspendisse pellentesque est tellus, ut consequat magna dictum ut. Sed orci enim, ultrices bibendum justo vitae, tristique fringilla orci. Nullam semper arcu quam, ut facilisis massa semper ut. Donec dictum porttitor erat et molestie. Proin ac justo dapibus, luctus velit vestibulum, eleifend tellus. Morbi ac molestie est, ut pellentesque nibh. Nunc at venenatis velit. Nullam scelerisque laoreet magna volutpat pellentesque. Donec a tincidunt metus, a mollis neque. Etiam urna mauris, dapibus sed felis et, consequat ultrices ligula. Nullam vitae bibendum lacus, eu condimentum sapien. Nunc sollicitudin sit amet eros at cursus. Duis gravida eros turpis, eu venenatis nibh vulputate vel.</p>
<p>Nulla augue nisi, iaculis non massa at, varius lacinia nibh. Suspendisse congue arcu leo, a placerat nisl rhoncus eu. Quisque augue ipsum, accumsan a nulla et, sodales porttitor eros. Integer nec cursus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tempus magna urna, eget egestas purus hendrerit eu. Fusce in velit euismod, sodales libero feugiat, auctor mauris. In hac habitasse platea dictumst. Donec ornare commodo massa. Integer ut urna arcu. Cras maximus, mi in tristique auctor, lorem ipsum semper mauris, nec tincidunt nisl turpis et justo. Donec vitae purus aliquet ex porta vestibulum at nec magna. Pellentesque varius vehicula ante vitae dictum. Sed quis justo eget tellus commodo porta a in felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Integer vestibulum mollis magna, id tincidunt diam condimentum vel. Cras lacinia quam vel tincidunt dictum. Donec interdum nec magna vel pharetra. Suspendisse et tempor neque, et rutrum velit. Ut ligula lacus, commodo ut mollis quis, auctor faucibus magna. Morbi feugiat hendrerit libero id elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pulvinar sapien ac finibus condimentum. Etiam rutrum auctor elementum. Sed hendrerit, neque eget vehicula dignissim, justo dolor blandit ipsum, eget gravida purus erat vitae nisi. Phasellus in tellus tincidunt, interdum diam id, dictum mauris.</p>
<p>Fusce mattis convallis suscipit. Nam aliquam risus tincidunt arcu aliquam efficitur. Nulla euismod sed ligula quis bibendum. Sed felis dolor, dignissim ac aliquam vitae, maximus eget augue. Proin eu ligula vitae nisi accumsan convallis eget eu erat. Vivamus laoreet arcu dignissim pulvinar dapibus. Vivamus laoreet lorem nec faucibus molestie. Phasellus sit amet bibendum ligula. Pellentesque at augue felis. Nulla luctus dapibus dui eu maximus. Proin sapien quam, scelerisque id egestas vel, efficitur id arcu. Vestibulum pellentesque lectus in rhoncus egestas. Ut a pellentesque arcu, vel ultrices augue. Praesent viverra urna laoreet sem lobortis dapibus. Aliquam mauris odio, maximus vel risus imperdiet, consequat accumsan odio.</p>
<p>Aenean gravida metus eu orci egestas, vitae venenatis ligula faucibus. Fusce eget eros vitae nibh porta pretium. Sed nulla quam, commodo id interdum nec, blandit sed ligula. Duis sed ante eleifend velit tempus porttitor vel sit amet diam. Donec tempus sollicitudin urna quis interdum. Nunc mattis in elit sed volutpat. Maecenas laoreet elit a metus fringilla molestie. Etiam vel rhoncus risus.</p>
<p>Fusce nec dignissim dolor. Aenean venenatis enim a condimentum venenatis. Duis viverra, risus quis auctor venenatis, velit dui mollis mauris, quis fermentum mauris leo eu nunc. Aenean ultrices justo ac metus pretium laoreet. Aliquam mattis nisi arcu, at pretium magna tempus id. Donec elementum turpis eget ligula semper faucibus. Cras erat felis, ornare vitae convallis eu, faucibus in erat. Aliquam porttitor rutrum massa, quis consectetur nulla aliquet eu. Duis ut diam eu nulla finibus vehicula eget ac augue. Ut urna ante, varius a metus ut, sollicitudin eleifend sapien. Morbi facilisis pretium sem. Suspendisse dapibus augue leo, nec dignissim lacus lacinia et.</p>
<p>Etiam laoreet in tortor a rhoncus. Pellentesque eget maximus lectus. Etiam tristique arcu a leo commodo rhoncus. Aliquam non sem a quam consectetur ultricies id non felis. Vestibulum commodo, risus in lacinia dictum, diam libero tincidunt magna, ac viverra elit velit eget orci. Nullam dolor risus, blandit eget nunc non, ultrices consequat tortor. Sed in odio tincidunt, mollis urna sit amet, condimentum enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla consectetur dignissim odio id imperdiet. Maecenas semper pellentesque dignissim. Cras urna tellus, auctor vel tincidunt non, eleifend in diam. In rhoncus nisi dolor. Donec sed posuere enim, nec dapibus orci. Nullam metus lectus, interdum eget mollis a, fringilla non quam. Fusce sollicitudin neque vitae commodo sodales. Suspendisse potenti.</p>
<p>Sed sed turpis sagittis, varius nunc quis, elementum nibh. Etiam eget scelerisque ex, sit amet hendrerit nulla. Nam eleifend pharetra ipsum, id pretium nibh imperdiet quis. In hac habitasse platea dictumst. Ut mattis, turpis sed auctor efficitur, metus eros scelerisque tortor, eget rhoncus erat urna ut tellus. Integer id nisi sapien. Phasellus non rutrum nunc, nec molestie nisl. Suspendisse quis enim blandit, efficitur urna pellentesque, vehicula nulla. Aenean rhoncus sem non elit tristique vestibulum eget ac erat. Nunc vestibulum odio libero. Donec sit amet iaculis lacus. Duis vel sodales enim. Sed et ultrices dolor, sit amet vehicula magna.</p>
<p>Pellentesque sem turpis, mollis vitae ligula a, venenatis tristique augue. In hac habitasse platea dictumst. Morbi et felis vel turpis efficitur fermentum eu in libero. Mauris bibendum ligula sapien, non eleifend nisl interdum ac. Duis pharetra lorem nibh, vitae aliquam neque bibendum a. Ut eu scelerisque erat, et dignissim metus. Vivamus egestas fermentum magna at commodo. In sodales velit in ante suscipit consequat. Vivamus porttitor nisl at lectus vestibulum, et porta dui volutpat. Phasellus sit amet dui quis diam auctor maximus et ac massa. Integer tempor eu mauris non facilisis. Donec et rhoncus ligula, vitae interdum purus. Nulla vel tellus ex.</p>
<p>Cras magna orci, imperdiet at euismod eu, ullamcorper id tortor. Vivamus eget elit elementum, porta mi quis, mollis sem. In ac risus id nunc eleifend tincidunt a commodo mi. In quis dictum purus. Quisque molestie aliquam ex, quis feugiat mi porta ut. Suspendisse feugiat condimentum quam, ac dapibus velit convallis sed. Donec sed enim cursus, tincidunt mauris nec, dictum dui. Nulla vel diam dictum, ultricies ligula eget, porta mauris. Nullam ante metus, sagittis at mauris eu, mattis blandit dolor. Vivamus bibendum auctor orci. Pellentesque pellentesque tincidunt dui ut rutrum.</p>
<p>Donec consequat lacus eget imperdiet euismod. Suspendisse in ligula nisi. Nulla facilisi. Nam lacus nulla, tempus sit amet cursus convallis, malesuada eu felis. Curabitur non urna justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt est ut urna accumsan auctor. Aliquam pretium rutrum diam, ut interdum libero. In eget tempus ligula. Etiam risus dui, sollicitudin id ipsum eget, iaculis tempus libero. Aenean commodo euismod felis eu faucibus. Nulla facilisis at metus sed malesuada. Duis gravida consequat accumsan. Cras mollis purus in nunc pharetra lacinia. Nunc varius nisl a enim egestas, in facilisis enim tincidunt.</p>
</div>
<div id="footer">
<p>FOOTER</P>
</div>
</body>
I managed to fix this by wrapping both the nav and content panes in another div:
#content {
overflow-y: scroll;
height: 100%;
}
#nav {
overflow-y: scroll;
height: 100%;
width: 160px;
float: left;
}
#wrapper {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
right: 0px;
}
<div id="wrapper">
<div id="nav">
...
</div>
<div id="content">
...
</div>
</div>
I want to expand my menu height to always take 100% of the visible height.
For the moment it only take the 100% at the loading, then if I scroll down there is a white block and it's ugly.
I can't post images because I haven't 10points
The CSS of my menu is the following one:
.nav-sm .container.body .col-md-3.left_col {
min-height: 100%;
width: 70px;
padding: 0;
z-index: 9999;
position: absolute;
}
The thing I want to achieve is to have my menu who always took all the visible height and I can't find how to do that.
Another possibility is to use vh (viewheight) instead of working with percentages:
.nav-sm .container.body .col-md-3.left_col {
min-height: 100vh;
width: 70px;
padding: 0;
z-index: 9999;
position: absolute;
border: 1px solid black;
}
(For reference, check this W3Schools page
Hope this helps
Try this:
div#navi{
width:100px;
height:auto;
top:0px;
bottom:0px;
position:fixed;
background:maroon;
}
body {
height:2000px;
margin: 0px;
padding: 0px;
}
<div id="navi">
test
</div>
.demo{
width:100%;
height:100%;
background:#e0e0e0;
}
body {
height:2000px;
margin:0px;
padding:0px;
}
<body>
<div class="demo">
<span>Hello World</span>
</div>
</body>
Here's how you can do this.
Set the position of the menu to be fixed and then use height: 100%; to make it full height and not move when the page is scrolled.
Here's the working demo: https://jsfiddle.net/jv8a4hhh/
And the code snippent:
body {
margin: 0;
padding: 0;
height: 1000px;
}
navigation {
background: #cccccc;
color: #2e2e2e;
padding: 10px 10px;
position: fixed;
height: 100%;
left: 0;
top: 0;
}
<navigation>
THIS IS MENU
</navigation>
<content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
</content>
Hope this helps :)
I have a header (div), menu (div) & content (div) inside a container (scrollable div).
I'd like to set menu to stay at top of container only when scrolling down inside of the container (scrollable div)!!!.
Here is my code:
<div id="wrapper">
<div id="LangBar"/>
<div id="LeftFloat"/>
<div class="main" id="sb">**this is the CONTAINER (SCROLLABLE DIV)**
<div id="header">**this is the HEADER (DIV)**</div>
<div id="menu">**this is the MENU (DIV)**</div>
<div class="section">**this is the CONTENT (DIV)**</div>
<div id="footer"/>
</div>
<div id="RightFloat"/>
</div>
HERE IS MY JSFIDDLE
Please see my code: http://jsfiddle.net/aisinvon/4pEBm/5
Because you need menu stick only when scroll down, we can use jquery to do it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.section {
height:1000px;
background: #ccc;
}
.main{
height: 500px;
overflow: scroll;
}
.fixed {
position:fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="LangBar" />
<div id="LeftFloat" />
<div class="main" id="sb">**this is the CONTAINER (SCROLLABLE DIV)**
<div id="header">**this is the HEADER (DIV)**</div>
<div id="menu">**this is the MENU (DIV)**</div>
<div class="section">**this is the CONTENT (DIV)**</div>
<div id="footer" />
</div>
<div id="RightFloat" />
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#menu'),
menuTop = $menu.offset().top;
$('#sb').scroll(function() {
var scrollTop = $('#sb').scrollTop();
if (scrollTop > menuTop) {
$menu.addClass('fixed');
} else {
$menu.removeClass('fixed');
}
});
});
</script>
</div>
</body>
</html>
Absolute position the 3 elements and set overflow:auto for the middle one like in this fiddle. http://jsfiddle.net/majinnaibu/p47mU/
CSS
html, body, #wrapper{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#wrapper{
background: #0f0;
}
#header{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(255,0,0,0.5);
}
#footer{
position: absolute;
height: 50px;
bottom: 0px;
left: 0px;
right: 0px;
background: rgba(0,0,255,0.5);
}
#content{
position: absolute;
overflow: auto;
top: 50px;
bottom: 50px;
}
HTML
<div id="wrapper">
<div id="header">
Header Content
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.
</div>
<div id="footer">
Footer Content
</div>
</div>