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>
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.
I'm creating an HTML template for DOMPDF need to support multiple pages, but the header and footer doesn't show up on the first page when I have multiple pages.
At the moment;
When I have multiple pages, all pages have Header and Footer correctly except the first (the First page only shows content, page 2,3 and shows content with header and footer).
When I just have one page, the pages shows correctly with header and footer.
<style>
* {
background:transparent;
}
#page {
margin: 0cm 0cm;
background:#000;
margin-top: 190px;
margin-left: 75px;
margin-right: 75px;
margin-bottom: 115px;
position: reletive;
}
header {
position: fixed;
top: -190px;
left: -13px;
z-index:0;
right: 0cm;
}
footer {
position: fixed;
bottom: -115px;
right: 0cm;
left:39px;
z-index:0;
height: 215px;
}
div.content {
float: left;
width: 100%;
}
div {
z-index:10;
background:transparent;
}
</style>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra leo bibendum mi fermentum euismod. Aenean ut augue mauris. Vivamus ultricies euismod malesuada. Praesent mollis eros vel elit ullamcorper, nec viverra justo ultrices. Sed sagittis nisi sit amet convallis placerat. Nam sed dui quis lacus auctor eleifend. Nulla in imperdiet magna, eget dignissim tellus. Quisque placerat nisl a orci tincidunt, sit amet porta nibh dapibus. Vestibulum tortor neque, consequat nec nibh ornare, convallis sagittis ligula. Integer a ex at sapien porttitor volutpat ut in elit.</p>
<p>Fusce nunc orci, posuere sed varius ac, ornare eu orci. Donec consequat pulvinar eleifend. Donec rutrum fringilla dignissim. In consectetur ligula nec pulvinar placerat. Duis interdum accumsan congue. Nulla iaculis magna laoreet dolor tempor, vitae eleifend lectus accumsan. Suspendisse vulputate euismod ante, at blandit tellus auctor a. Sed aliquam lacus eget mi fermentum, vitae maximus elit rhoncus. Nunc vel sagittis orci.v
<p>Quisque fermentum augue in metus laoreet placerat. Nam eget nisi congue, luctus augue quis, ullamcorper est. Nullam eu augue sed dui imperdiet ornare ac interdum lacus. Mauris in viverra lorem. Duis cursus mi quis pellentesque condimentum. Vivamus ut nisl lacus. Phasellus condimentum eros non massa porta rutrum. Proin lacinia ultrices dui ut iaculis. Praesent ut placerat tellus, ac hendrerit mi.</p>
<p>Suspendisse vitae velit maximus, convallis ipsum vel, ornare sem. Curabitur et viverra ligula. Phasellus facilisis neque eu nunc interdum tempor. Mauris tellus lacus, vestibulum sed posuere eu, porttitor non orci. Proin sollicitudin et nisl eget mattis. Donec euismod ipsum quis interdum dictum. Duis facilisis accumsan ultricies. Praesent sollicitudin urna nunc, at auctor odio blandit nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean consequat, magna a molestie commodo, mauris lacus congue nisi, quis pellentesque nunc quam in metus. Duis volutpat neque in justo sodales, eget ultricies libero pellentesque.</p>
<p>Curabitur euismod velit turpis, consectetur ornare erat aliquam a. Nulla sagittis commodo varius. Pellentesque tempor, nibh a hendrerit tristique, turpis leo lacinia elit, vitae scelerisque dolor ex ac lectus. Maecenas vulputate dictum erat, quis posuere nisl pellentesque vitae. Nulla auctor volutpat lacus, sed sodales mi porta at. In ut purus augue. Fusce nec nulla non leo finibus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra id ante sed porttitor. Nam et dolor congue, malesuada enim facilisis, rutrum justo. Etiam quis lectus a tellus mollis placerat. Maecenas interdum tortor faucibus metus tincidunt euismod. Vestibulum laoreet velit quis lobortis interdum. Duis urna quam, vehicula sed ultricies ut, volutpat accumsan libero.</p>
<p>Morbi pulvinar tristique augue, vel pellentesque nisl porta eget. Quisque eu lacinia leo. Nullam ac lacus pretium, suscipit risus quis, volutpat ligula. Morbi vel nisl orci. Suspendisse pharetra tellus euismod ligula tristique, sit amet lacinia nisl ultrices. Curabitur finibus turpis nec metus tempus, non suscipit leo pulvinar. Pellentesque fringilla faucibus massa. Suspendisse commodo egestas tristique. Phasellus tristique vehicula nisl ut consectetur. Aliquam hendrerit augue eu posuere fermentum. Nulla a neque quis ex finibus congue. Vestibulum id condimentum augue. Nulla pretium imperdiet turpis, sit amet cursus urna maximus quis. Praesent dictum, leo nec ultricies fermentum, eros leo maximus felis, in aliquam lectus ligula at mauris. Etiam non ipsum at dui fringilla ullamcorper. Donec sapien lorem, aliquam in lacus at, lacinia pretium velit.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
<p>Nulla ultrices rhoncus massa, eu dignissim purus scelerisque ut. Aenean id odio molestie neque tincidunt porttitor. Vivamus eget ultrices lacus. Etiam vitae sagittis orci. Etiam sed ullamcorper eros. Nulla consequat dignissim pretium. Morbi volutpat, quam nec vehicula venenatis, mauris ipsum egestas lacus, nec gravida augue dolor scelerisque enim. Aenean ac pretium ligula. Sed eget dui mi. Morbi et scelerisque diam, ac laoreet tortor. In lobortis, neque vel interdum convallis, elit mauris porta erat, id vestibulum dui nunc porttitor urna. Nulla elementum varius est, a varius mauris hendrerit non. Praesent malesuada ex nisi, sit amet imperdiet mauris vestibulum vel.</p>
<p>Duis at augue ultricies, cursus felis quis, laoreet odio. Ut eget diam neque. Sed a condimentum ex. Donec quis erat eget sem feugiat iaculis ac id dolor. Morbi sit amet convallis neque, mattis egestas nunc. Vestibulum sed laoreet nunc, id viverra nisl. Sed quis ornare erat, vel malesuada sem. Suspendisse vitae hendrerit erat, non maximus metus. Phasellus eget erat ac ipsum placerat vehicula. Aenean in metus pulvinar, posuere enim vitae, imperdiet enim. Aliquam erat volutpat. Donec luctus sapien in malesuada auctor. Donec ullamcorper leo ac sapien vehicula, non iaculis magna pulvinar. Sed tincidunt porta ex sed euismod. Pellentesque consequat tortor lacus, non blandit ex viverra vel. Nam non libero at libero interdum eleifend.</p>
<p>Phasellus in est at nunc cursus luctus eget at ipsum. Vivamus massa sem, auctor quis velit eget, pellentesque pellentesque sapien. Nulla id maximus mauris. Pellentesque consequat tempor mattis. Fusce nec cursus nulla. Fusce vestibulum mauris in erat porttitor vehicula. Nullam pellentesque metus eget ornare auctor. Fusce facilisis risus vitae arcu accumsan efficitur. Vivamus porttitor augue risus, nec venenatis dui imperdiet quis.</p>
<p>Sed et arcu a tellus vulputate dignissim. Pellentesque egestas arcu vel quam auctor sollicitudin. Vestibulum at lacus eu sapien lacinia consequat. Vivamus sed turpis in eros consequat tempor sit amet non purus. Phasellus elementum lacinia metus vel varius. Morbi ut velit augue. Suspendisse rutrum vehicula metus, id faucibus magna. Curabitur magna metus, tempus consequat ex quis, dignissim sollicitudin nibh.</p>
</div>
<footer>
<img src="'.__DIR__.'/bottom.png" alt="" style="width:680px;"/>
</footer>
<header>
<img src="'.__DIR__.'/top.png" alt="" style="margin: 0px 0px 0px 0px; width:732px;"/>
</header>
In dompdf (up to and including version 0.8.3, latest release as of this post) elements are (generally speaking) rendered starting with the page on which they first appear. Because of this you'll want to put any header/footer content at the top of your document.
There is an issue related to this quirk here: https://github.com/dompdf/dompdf/issues/491
Hello i'm trying to find the best way of keeping my skewed elements in place whist resizing page.
I want to be able to extend the content area (green area) and keep that the same shape but also have the white corners the same shape as well.
Sorry for my lack of knowledge in this area, i'm currently still learning this
I will accept JavaScript or JQuery solutions.
Here is an example what I have so far:
/* Latest compiled and minified CSS included as External Resource*/
.container-fluid{
background: green;
padding: 0px;
color: black;
position: relative;
}
.container{
padding: 50px;
}
.overlay-top-right {
position: absolute;
right: 0;
top: 0;
height: 300px;
width: 30%;
background: #ffffff;
transform-origin: top right;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
.overlay-bottom-left {
position: absolute;
left: 0;
bottom: 0;
height: 300px;
width: 40%;
background: #ffffff;
transform-origin: bottom left;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<div class="container-fluid">
<div class="overlay-top-right"></div>
<div class="overlay-bottom-left"></div>
<div class="container">
<div class="row">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
</div>
</div>
</div>
You may replace your elements by :before and :after on the text area and use floating like this:
/* Latest compiled and minified CSS included as External Resource*/
.container-fluid{
background: green;
padding: 0px;
color: black;
position: relative;
}
.container{
padding: 50px;
overflow:hidden;
}
.overlay {
position:relative;
}
.overlay:before {
content:" ";
float:right;
margin-right: -50px;
margin-top: -50px;
height: 150px;
width: 150px;
background: #ffffff;
transform-origin: top right;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
.overlay:after {
content:" ";
float:left;
position:relative;
margin-left: -50px;
margin-bottom: -50px;
height: 100px;
width: 100px;
background: #ffffff;
transform-origin: bottom left;
-ms-transform: skew(45deg,0deg);
-webkit-transform: skew(45deg,0deg);
transform: skew(45deg,0deg);
}
/* Optional theme */
<div class="container-fluid">
<div class="container">
<div class="row overlay">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci.
Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor.
Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur.
Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim.
Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna.
</div>
</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 :)
Important: The target rendering engine is WebKit2, so browser compatibility isn't a concern.
I want the following layout:
____________ ____________________
| | | |
| | | |
| | | |
| #sb | | #act |
| | | |
| | | |
| | | |
..................................................
| # footer |
..................................................
where #sb and #act should have their own vertical scroll bars (when needed); and the footer is FIXED to the bottom and always shown.
I've managed to code this layout but haven't been able to fix an irritating bug - When #sb and / or #act have scrollbars (due to content that doesn't fit in them), and when you scroll down to the end, the damn footer overlaps and hides the last few lines (or any other content). As such, part of the content at the bottom isn't visible.
This is the code -
HTML:
<body>
<div id="main">
<div id="sp">
<div id="sb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt.
And so on ...
</div>
<div id="act">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt.
And so on ...
</div>
</div>
</div>
<footer> </footer>
</body>
and the CSS:
#charset"utf-8";
html {
height: 100%;
}
body {
background-color: #d1cdc7;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
height: 100%;
}
#main {
bottom: 0px;
left: 5%;
margin-bottom: 0px;
margin-top: 20px;
max-width: 1920px;
min-width: 820px;
overflow: visible;
position: fixed;
right: 5%;
top: 10px;
}
#main #sp {
overflow: visible;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
padding: 5px;
height: 100%;
}
#main #sp #sb {
background-color: #F8F6F2;
float: left;
width: 28%;
margin-right: 2%;
overflow: auto;
padding: 1%;
height: 100%;
}
#main #sp #act {
background-color: #F8F6F2;
float: left;
width: 66%;
overflow: auto;
padding: 1%;
height: 100%;
}
#footpad {
height: 30px;
clear: both;
}
footer {
background-color: #E1E1E1;
position: fixed;
height: 27px;
width: 100%;
bottom: 0px;
}
... and the code in action on JSFiddle.
Can someone explain what's wrong?
To fix the footer problem in the css file under
#main {
bottom: 80px; <--- use to be 0.... you can change it to whatever you want
left: 5%;
margin-bottom: 0px;
margin-top: 20px;
max-width: 1920px;
min-width: 820px;
overflow: visible;
position: fixed;
right: 5%;
top: 10px;
}
I changed the bottom to no be the same as the footer so they don't stack. I don't know if that was the problem or not.
Add this code to the very top of the css file as a reset this might fix the problem with it not working in your browser.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Add padding-bottom:100px; to #main
Fiddle
Copy-Paste the entire code below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#charset"utf-8";
html {
height: 100%;
}
body {
background-color: #d1cdc7;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
height: 100%;
}
#main {
bottom: 0px;
left: 5%;
margin-bottom: 0px;
margin-top: 20px;
max-width: 1920px;
min-width: 820px;
overflow: visible;
position: fixed;
right: 5%;
top: 10px;
padding-bottom:100px;
}
#main #sp {
overflow: visible;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
padding: 5px;
height: 100%;
}
#main #sp #sb {
background-color: #F8F6F2;
float: left;
width: 28%;
margin-right: 2%;
overflow: auto;
padding: 1%;
height: 100%;
}
#main #sp #act {
background-color: #F8F6F2;
float: left;
width: 66%;
overflow: auto;
padding: 1%;
height: 100%;
}
footer {
background-color: #000;
position: fixed;
height: 27px;
width: 100%;
bottom: 0px;
}
</style>
</head>
<body>
<div id="main">
<div id="sp">
<div id="sb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt. Suspendisse lacus purus, ornare nec augue sit amet, pulvinar malesuada metus. Morbi fringilla tempor ante quis elementum. In tempor odio arcu, vel suscipit metus mattis ac. Sed ac nulla ac lacus faucibus hendrerit. Etiam velit urna, pulvinar quis erat ac, cursus convallis lacus. Mauris non convallis orci, nec congue urna. Sed ac diam vitae erat porta viverra id nec tellus. Aliquam blandit nibh sed eros sollicitudin, ac ornare dui sagittis. Etiam semper, neque luctus feugiat facilisis, felis mi hendrerit augue, ut feugiat orci tellus vitae dui. Aenean ullamcorper consectetur quam sed dictum. Nam viverra elit lorem, sed eleifend augue interdum sit amet. Maecenas lacinia lectus eget vulputate tristique. Cras eget quam eu libero fringilla tincidunt. Aenean at nibh eget lacus vestibulum tristique ac sit amet nunc. Integer at vulputate neque, ut tempus purus. Etiam ac nunc odio. Aliquam tellus est, adipiscing sit amet enim vel, luctus egestas eros. Morbi in accumsan diam, nec commodo neque. Curabitur at nisl non magna venenatis vehicula. Duis non sagittis mauris, et fermentum nunc. Integer sapien nisi, mollis commodo pellentesque eu, rutrum volutpat ipsum. Etiam non scelerisque ligula. Donec iaculis lorem lorem, quis porttitor velit molestie eget. Nunc mollis nibh nec ipsum tincidunt, vel lobortis erat mattis. Suspendisse leo libero, blandit sit amet turpis non, tincidunt egestas nunc. Integer venenatis lectus justo, a sodales odio auctor ut. Morbi purus sem, rhoncus id magna non, eleifend blandit urna. Fusce bibendum augue non nisl aliquet ultricies. Praesent tincidunt lacus quis velit cursus, quis egestas nunc pretium. Pellentesque eu est ultricies, molestie lacus eget, consectetur erat. Nullam condimentum fringilla tempor. Morbi a pellentesque turpis. Curabitur ut elit nulla. Nam vitae sodales enim, vel dignissim nisl. Donec convallis pharetra sem consectetur molestie. Nulla semper ultrices neque non blandit. Pellentesque eget justo leo. Sed consectetur porttitor metus, vel fringilla sapien adipiscing ac. Pellentesque vel risus posuere, dapibus leo varius, fermentum arcu. Nulla in ligula luctus, molestie ligula vel, interdum est. Donec sed erat dolor. Sed cursus suscipit purus, ut eleifend enim vestibulum sit amet. Morbi elit felis, ornare vitae tellus ut, commodo ullamcorper leo. Cras faucibus, est quis vehicula blandit, tortor ante viverra tellus, at tristique metus erat eget lorem. Vivamus et auctor massa, ac commodo massa. Vestibulum magna mi, auctor nec ultrices ullamcorper, auctor sit amet urna. Nulla facilisi. Fusce purus libero, elementum nec ultricies molestie, pharetra at magna. Cras posuere dui in venenatis dignissim. Donec cursus augue eget lacus mattis, iaculis rutrum elit aliquet. Sed commodo, elit sit amet laoreet laoreet, est nunc euismod sem, eu consequat lorem lacus eget urna. In pharetra velit mauris, non vulputate odio sagittis a. Integer non vulputate velit. Nunc sed tellus molestie, egestas risus eget, pretium eros. Etiam vestibulum eget mauris a hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at ipsum eu quam tincidunt dignissim. Etiam egestas eget orci non commodo. In hac habitasse platea dictumst. Fusce semper aliquam dui, vehicula fringilla metus porttitor at. Curabitur mollis non tortor non hendrerit. Morbi ut nibh ut libero ultricies bibendum. Donec varius tincidunt tincidunt. Etiam bibendum consequat felis quis fermentum. Vivamus viverra varius urna a semper. Cras id mi velit. Aenean vitae nunc ullamcorper, sodales arcu ac, vehicula dolor. Proin dignissim ut odio pellentesque lobortis. Cras fermentum placerat arcu sed eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sagittis urna eget dui tristique, eu dapibus justo pretium. Vestibulum tincidunt ante sed dictum feugiat. Praesent rhoncus quam a nunc pharetra ultricies. Quisque ac dictum massa, non consequat diam. Suspendisse iaculis ornare tortor volutpat malesuada. Curabitur non sollicitudin nunc, a congue lorem. Vivamus sed hendrerit dui. Phasellus eu libero gravida, eleifend est a, convallis orci. Integer aliquam, tortor vitae semper pretium, justo purus accumsan metus, sit amet vestibulum nisi orci at arcu. Vivamus eu nulla vel leo laoreet aliquet. Quisque at enim eros. Mauris pulvinar dictum felis, aliquet vestibulum odio cursus vitae. Proin diam nulla, condimentum non condimentum a, accumsan vitae felis. In hac habitasse platea dictumst. Curabitur nisl magna, viverra ac vestibulum semper, faucibus fermentum eros. Nunc a gravida eros, et imperdiet arcu. Nunc sit amet sagittis est. In ullamcorper fermentum lorem, vel hendrerit libero auctor nec. Suspendisse in lectus adipiscing, elementum felis vitae, tincidunt mi. Nunc tincidunt eros nisi, in ullamcorper metus dapibus nec. Vestibulum luctus risus ac nisl tincidunt scelerisque. Suspendisse volutpat velit tortor, eget auctor odio placerat at. Suspendisse tristique ligula ullamcorper massa venenatis cursus. Nunc sagittis enim eu feugiat suscipit. Suspendisse accumsan, augue vulputate placerat porta, dolor nulla sodales enim, a bibendum velit ipsum quis elit. Aliquam erat volutpat. Nam sed tempor eros. Suspendisse cursus enim nec dui bibendum, ut pellentesque urna adipiscing. Etiam sit amet eros ac massa sodales sagittis. Mauris eget tristique sapien. Maecenas felis dui, luctus quis dictum nec, scelerisque vel est. Vestibulum tristique velit ac ante viverra, eget malesuada nisl faucibus. Etiam consequat felis mi, et porta sapien faucibus id. Vivamus a mollis metus. Proin dapibus sollicitudin consequat. Pellentesque eu sollicitudin magna. Donec ac magna pretium, gravida mauris eget, egestas nulla. Pellentesque in hendrerit nunc. Sed vitae massa luctus, ultricies nisl eu, tincidunt nunc. Donec gravida mattis consequat. Cras quis sem molestie, faucibus dolor id, pretium mauris. Morbi sit amet leo sed leo tincidunt ultrices. Sed enim purus, adipiscing ut nisl vitae, accumsan scelerisque ipsum. Cras vitae felis lacus.
THIS IS THE LAST LINE.
</div>
<div id="act">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt. Suspendisse lacus purus, ornare nec augue sit amet, pulvinar malesuada metus. Morbi fringilla tempor ante quis elementum. In tempor odio arcu, vel suscipit metus mattis ac. Sed ac nulla ac lacus faucibus hendrerit. Etiam velit urna, pulvinar quis erat ac, cursus convallis lacus. Mauris non convallis orci, nec congue urna. Sed ac diam vitae erat porta viverra id nec tellus. Aliquam blandit nibh sed eros sollicitudin, ac ornare dui sagittis. Etiam semper, neque luctus feugiat facilisis, felis mi hendrerit augue, ut feugiat orci tellus vitae dui. Aenean ullamcorper consectetur quam sed dictum. Nam viverra elit lorem, sed eleifend augue interdum sit amet. Maecenas lacinia lectus eget vulputate tristique. Cras eget quam eu libero fringilla tincidunt. Aenean at nibh eget lacus vestibulum tristique ac sit amet nunc. Integer at vulputate neque, ut tempus purus. Etiam ac nunc odio. Aliquam tellus est, adipiscing sit amet enim vel, luctus egestas eros. Morbi in accumsan diam, nec commodo neque. Curabitur at nisl non magna venenatis vehicula. Duis non sagittis mauris, et fermentum nunc. Integer sapien nisi, mollis commodo pellentesque eu, rutrum volutpat ipsum. Etiam non scelerisque ligula. Donec iaculis lorem lorem, quis porttitor velit molestie eget. Nunc mollis nibh nec ipsum tincidunt, vel lobortis erat mattis. Suspendisse leo libero, blandit sit amet turpis non, tincidunt egestas nunc. Integer venenatis lectus justo, a sodales odio auctor ut. Morbi purus sem, rhoncus id magna non, eleifend blandit urna. Fusce bibendum augue non nisl aliquet ultricies. Praesent tincidunt lacus quis velit cursus, quis egestas nunc pretium. Pellentesque eu est ultricies, molestie lacus eget, consectetur erat. Nullam condimentum fringilla tempor. Morbi a pellentesque turpis. Curabitur ut elit nulla. Nam vitae sodales enim, vel dignissim nisl. Donec convallis pharetra sem consectetur molestie. Nulla semper ultrices neque non blandit. Pellentesque eget justo leo. Sed consectetur porttitor metus, vel fringilla sapien adipiscing ac. Pellentesque vel risus posuere, dapibus leo varius, fermentum arcu. Nulla in ligula luctus, molestie ligula vel, interdum est. Donec sed erat dolor. Sed cursus suscipit purus, ut eleifend enim vestibulum sit amet. Morbi elit felis, ornare vitae tellus ut, commodo ullamcorper leo. Cras faucibus, est quis vehicula blandit, tortor ante viverra tellus, at tristique metus erat eget lorem. Vivamus et auctor massa, ac commodo massa. Vestibulum magna mi, auctor nec ultrices ullamcorper, auctor sit amet urna. Nulla facilisi. Fusce purus libero, elementum nec ultricies molestie, pharetra at magna. Cras posuere dui in venenatis dignissim. Donec cursus augue eget lacus mattis, iaculis rutrum elit aliquet. Sed commodo, elit sit amet laoreet laoreet, est nunc euismod sem, eu consequat lorem lacus eget urna. In pharetra velit mauris, non vulputate odio sagittis a. Integer non vulputate velit. Nunc sed tellus molestie, egestas risus eget, pretium eros. Etiam vestibulum eget mauris a hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at ipsum eu quam tincidunt dignissim. Etiam egestas eget orci non commodo. In hac habitasse platea dictumst. Fusce semper aliquam dui, vehicula fringilla metus porttitor at. Curabitur mollis non tortor non hendrerit. Morbi ut nibh ut libero ultricies bibendum. Donec varius tincidunt tincidunt. Etiam bibendum consequat felis quis fermentum. Vivamus viverra varius urna a semper. Cras id mi velit. Aenean vitae nunc ullamcorper, sodales arcu ac, vehicula dolor. Proin dignissim ut odio pellentesque lobortis. Cras fermentum placerat arcu sed eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sagittis urna eget dui tristique, eu dapibus justo pretium. Vestibulum tincidunt ante sed dictum feugiat. Praesent rhoncus quam a nunc pharetra ultricies. Quisque ac dictum massa, non consequat diam. Suspendisse iaculis ornare tortor volutpat malesuada. Curabitur non sollicitudin nunc, a congue lorem. Vivamus sed hendrerit dui. Phasellus eu libero gravida, eleifend est a, convallis orci. Integer aliquam, tortor vitae semper pretium, justo purus accumsan metus, sit amet vestibulum nisi orci at arcu. Vivamus eu nulla vel leo laoreet aliquet. Quisque at enim eros. Mauris pulvinar dictum felis, aliquet vestibulum odio cursus vitae. Proin diam nulla, condimentum non condimentum a, accumsan vitae felis. In hac habitasse platea dictumst. Curabitur nisl magna, viverra ac vestibulum semper, faucibus fermentum eros. Nunc a gravida eros, et imperdiet arcu. Nunc sit amet sagittis est. In ullamcorper fermentum lorem, vel hendrerit libero auctor nec. Suspendisse in lectus adipiscing, elementum felis vitae, tincidunt mi. Nunc tincidunt eros nisi, in ullamcorper metus dapibus nec. Vestibulum luctus risus ac nisl tincidunt scelerisque. Suspendisse volutpat velit tortor, eget auctor odio placerat at. Suspendisse tristique ligula ullamcorper massa venenatis cursus. Nunc sagittis enim eu feugiat suscipit. Suspendisse accumsan, augue vulputate placerat porta, dolor nulla sodales enim, a bibendum velit ipsum quis elit. Aliquam erat volutpat. Nam sed tempor eros. Suspendisse cursus enim nec dui bibendum, ut pellentesque urna adipiscing. Etiam sit amet eros ac massa sodales sagittis. Mauris eget tristique sapien. Maecenas felis dui, luctus quis dictum nec, scelerisque vel est. Vestibulum tristique velit ac ante viverra, eget malesuada nisl faucibus. Etiam consequat felis mi, et porta sapien faucibus id. Vivamus a mollis metus. Proin dapibus sollicitudin consequat. Pellentesque eu sollicitudin magna. Donec ac magna pretium, gravida mauris eget, egestas nulla. Pellentesque in hendrerit nunc. Sed vitae massa luctus, ultricies nisl eu, tincidunt nunc. Donec gravida mattis consequat. Cras quis sem molestie, faucibus dolor id, pretium mauris. Morbi sit amet leo sed leo tincidunt ultrices. Sed enim purus, adipiscing ut nisl vitae, accumsan scelerisque ipsum. Cras vitae felis lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero congue, elementum ante vitae, porttitor sem. Cras pharetra ultrices mauris vel posuere. Sed rutrum enim tellus, eu facilisis risus vehicula et. Donec sagittis mattis nunc et vestibulum. Sed auctor purus et ullamcorper tincidunt. Suspendisse lacus purus, ornare nec augue sit amet, pulvinar malesuada metus. Morbi fringilla tempor ante quis elementum. In tempor odio arcu, vel suscipit metus mattis ac. Sed ac nulla ac lacus faucibus hendrerit. Etiam velit urna, pulvinar quis erat ac, cursus convallis lacus. Mauris non convallis orci, nec congue urna. Sed ac diam vitae erat porta viverra id nec tellus. Aliquam blandit nibh sed eros sollicitudin, ac ornare dui sagittis. Etiam semper, neque luctus feugiat facilisis, felis mi hendrerit augue, ut feugiat orci tellus vitae dui. Aenean ullamcorper consectetur quam sed dictum. Nam viverra elit lorem, sed eleifend augue interdum sit amet. Maecenas lacinia lectus eget vulputate tristique. Cras eget quam eu libero fringilla tincidunt. Aenean at nibh eget lacus vestibulum tristique ac sit amet nunc. Integer at vulputate neque, ut tempus purus. Etiam ac nunc odio. Aliquam tellus est, adipiscing sit amet enim vel, luctus egestas eros. Morbi in accumsan diam, nec commodo neque. Curabitur at nisl non magna venenatis vehicula. Duis non sagittis mauris, et fermentum nunc. Integer sapien nisi, mollis commodo pellentesque eu, rutrum volutpat ipsum. Etiam non scelerisque ligula. Donec iaculis lorem lorem, quis porttitor velit molestie eget. Nunc mollis nibh nec ipsum tincidunt, vel lobortis erat mattis. Suspendisse leo libero, blandit sit amet turpis non, tincidunt egestas nunc. Integer venenatis lectus justo, a sodales odio auctor ut. Morbi purus sem, rhoncus id magna non, eleifend blandit urna. Fusce bibendum augue non nisl aliquet ultricies. Praesent tincidunt lacus quis velit cursus, quis egestas nunc pretium. Pellentesque eu est ultricies, molestie lacus eget, consectetur erat. Nullam condimentum fringilla tempor. Morbi a pellentesque turpis. Curabitur ut elit nulla. Nam vitae sodales enim, vel dignissim nisl. Donec convallis pharetra sem consectetur molestie. Nulla semper ultrices neque non blandit. Pellentesque eget justo leo. Sed consectetur porttitor metus, vel fringilla sapien adipiscing ac. Pellentesque vel risus posuere, dapibus leo varius, fermentum arcu. Nulla in ligula luctus, molestie ligula vel, interdum est. Donec sed erat dolor. Sed cursus suscipit purus, ut eleifend enim vestibulum sit amet. Morbi elit felis, ornare vitae tellus ut, commodo ullamcorper leo. Cras faucibus, est quis vehicula blandit, tortor ante viverra tellus, at tristique metus erat eget lorem. Vivamus et auctor massa, ac commodo massa. Vestibulum magna mi, auctor nec ultrices ullamcorper, auctor sit amet urna. Nulla facilisi. Fusce purus libero, elementum nec ultricies molestie, pharetra at magna. Cras posuere dui in venenatis dignissim. Donec cursus augue eget lacus mattis, iaculis rutrum elit aliquet. Sed commodo, elit sit amet laoreet laoreet, est nunc euismod sem, eu consequat lorem lacus eget urna. In pharetra velit mauris, non vulputate odio sagittis a. Integer non vulputate velit. Nunc sed tellus molestie, egestas risus eget, pretium eros. Etiam vestibulum eget mauris a hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at ipsum eu quam tincidunt dignissim. Etiam egestas eget orci non commodo. In hac habitasse platea dictumst. Fusce semper aliquam dui, vehicula fringilla metus porttitor at. Curabitur mollis non tortor non hendrerit. Morbi ut nibh ut libero ultricies bibendum. Donec varius tincidunt tincidunt. Etiam bibendum consequat felis quis fermentum. Vivamus viverra varius urna a semper. Cras id mi velit. Aenean vitae nunc ullamcorper, sodales arcu ac, vehicula dolor. Proin dignissim ut odio pellentesque lobortis. Cras fermentum placerat arcu sed eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam sagittis urna eget dui tristique, eu dapibus justo pretium. Vestibulum tincidunt ante sed dictum feugiat. Praesent rhoncus quam a nunc pharetra ultricies. Quisque ac dictum massa, non consequat diam. Suspendisse iaculis ornare tortor volutpat malesuada. Curabitur non sollicitudin nunc, a congue lorem. Vivamus sed hendrerit dui. Phasellus eu libero gravida, eleifend est a, convallis orci. Integer aliquam, tortor vitae semper pretium, justo purus accumsan metus, sit amet vestibulum nisi orci at arcu. Vivamus eu nulla vel leo laoreet aliquet. Quisque at enim eros. Mauris pulvinar dictum felis, aliquet vestibulum odio cursus vitae. Proin diam nulla, condimentum non condimentum a, accumsan vitae felis. In hac habitasse platea dictumst. Curabitur nisl magna, viverra ac vestibulum semper, faucibus fermentum eros. Nunc a gravida eros, et imperdiet arcu. Nunc sit amet sagittis est. In ullamcorper fermentum lorem, vel hendrerit libero auctor nec. Suspendisse in lectus adipiscing, elementum felis vitae, tincidunt mi. Nunc tincidunt eros nisi, in ullamcorper metus dapibus nec. Vestibulum luctus risus ac nisl tincidunt scelerisque. Suspendisse volutpat velit tortor, eget auctor odio placerat at. Suspendisse tristique ligula ullamcorper massa venenatis cursus. Nunc sagittis enim eu feugiat suscipit. Suspendisse accumsan, augue vulputate placerat porta, dolor nulla sodales enim, a bibendum velit ipsum quis elit. Aliquam erat volutpat. Nam sed tempor eros. Suspendisse cursus enim nec dui bibendum, ut pellentesque urna adipiscing. Etiam sit amet eros ac massa sodales sagittis. Mauris eget tristique sapien. Maecenas felis dui, luctus quis dictum nec, scelerisque vel est. Vestibulum tristique velit ac ante viverra, eget malesuada nisl faucibus. Etiam consequat felis mi, et porta sapien faucibus id. Vivamus a mollis metus. Proin dapibus sollicitudin consequat. Pellentesque eu sollicitudin magna. Donec ac magna pretium, gravida mauris eget, egestas nulla. Pellentesque in hendrerit nunc. Sed vitae massa luctus, ultricies nisl eu, tincidunt nunc. Donec gravida mattis consequat. Cras quis sem molestie, faucibus dolor id, pretium mauris. Morbi sit amet leo sed leo tincidunt ultrices. Sed enim purus, adipiscing ut nisl vitae, accumsan scelerisque ipsum. Cras vitae felis lacus.
THIS IS THE LAST LINE.
</div>
</div>
</div>
<footer> </footer>
</body>
</html>