This question already has an answer here:
Heights rendering differently in Chrome and Firefox [duplicate]
(1 answer)
Closed 6 years ago.
I am trying to create a page that has an optional banner at the top, and a scrollable master view, with a detail.
Here is a plunk:
https://plnkr.co/edit/RxVw5RJVhQInhXV0AtWn?p=preview
This works great in Chrome and Safari. However in Firefox the banner is scrollable, and you have to scroll the banner off the screen to see the remaining content in the master view.
I could use fixed heights and offsets to get this to work, but I don't want to do that as my banner is optional and may not be present in some situations.
Is this a bug in firefox w/ flexbox? Something I am doing wrong? Thanks in advance for any help.
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.banner {
flex: 1 1 auto;
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex:1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">
orem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies.
Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet.
Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula.
Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius.
Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh.
Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh.
Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo.
Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail">
</div>
</div>
Don't flex the nav, just let it be sized by its contents:
.banner {
flex: auto;
}
Make the container fill the remaining space left by the banner (or all available space if there is no banner):
.container {
flex: 1;
overflow: auto;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
flex: 1;
overflow: auto;
}
.banner {
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex: 1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies. Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet. Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula. Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius. Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh. Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh. Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo. Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail"></div>
</div>
Related
I'm building a react app with flexbox and I'm struggling getting all the pieces as I want them.
I want a fixed header at the top with a body that has its content centered and that can be scrolled (the scrollbar has to start in the body, not the header). This body can't go to the edges of the page so I'm using max-width to prevent this. The problem is that when I use the max-width, the scrollbar gets placed next to the body and it looks awful. I want it to stay at the far right of the page. Finally I want some space between the end of the body and the page (a bit of padding, if you will) so the content doesn't look like it's getting cut with the end of the site.
I've done this mockup in Photoshop
I mostly got the code working, minus the max-width and bottom padding. Here's what I got:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
}
main {
flex: 1;
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
...
</main>
</div>
I understand that this question has been asked in multiple ways a lot of times, but I've been looking for a while and I can't find the right one that fixes every thing I need.
Thank you for the help.
What you can do is add another element within the <main> tag. I use a <div> tag in my example, but it could be whatever you want. Keep the
overflow: auto;
on the <main> tag, so when the inner div overflows, you can scroll the <main> tag to move the <div>
Here's an example where I added some background color to show separation and some Lorem Ipsum text:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
text-align: center;
}
#stuff {
border-radius: 5px;
background: pink;
padding: 5px;
margin: 20px;
flex: 1;
}
main {
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
<div id="stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec magna porta, commodo magna ut, porta erat. Phasellus tristique leo vitae ante efficitur, sed fermentum mi auctor. In condimentum mi a urna cursus vestibulum. Nunc posuere metus turpis, faucibus viverra purus aliquam nec. Curabitur ultrices, sem nec aliquet congue, ligula justo sagittis arcu, quis blandit urna sem nec sem. Cras accumsan, turpis ac placerat porta, libero ex semper tellus, non mattis dui ligula id odio. Cras lobortis ex in ex consequat, eu viverra nibh luctus. Nulla facilisi. Nulla odio arcu, suscipit eu dui eget, cursus sodales ipsum. Nulla vestibulum nisl eget ante pellentesque, vel porttitor magna dapibus. Suspendisse at ligula nunc. Phasellus scelerisque urna sit amet scelerisque pharetra. Quisque risus metus, tincidunt vitae ultricies in, convallis tempus justo. Sed finibus laoreet dolor sit amet tincidunt. Sed efficitur volutpat aliquet.
Suspendisse condimentum euismod quam id tempor. Vestibulum rhoncus metus eu tortor rhoncus eleifend. Nam sagittis ex ex, eget varius ante semper a. Aenean vulputate eget ligula vel sodales. Vivamus vel nisi dignissim, eleifend sem non, bibendum dolor. Ut pulvinar malesuada nisi sit amet suscipit. Sed ultrices maximus tellus, nec congue felis.
Duis urna orci, consequat et lacinia lobortis, varius sed sem. Ut auctor congue augue quis interdum. Morbi erat justo, venenatis ac imperdiet sit amet, cursus eget tellus. Quisque accumsan nibh a dui vulputate tincidunt. Aenean accumsan diam lorem, ac rutrum magna ullamcorper et. Proin volutpat dolor tristique scelerisque tempus. Donec eu neque non purus pulvinar bibendum sed vitae justo. Suspendisse luctus dolor neque, eu convallis tortor condimentum ac. Aliquam sollicitudin ex ut sollicitudin sagittis. Aliquam imperdiet, diam vel hendrerit iaculis, neque ex accumsan neque, in hendrerit risus massa convallis ante. Cras urna velit, cursus sed dignissim vitae, porttitor faucibus est. Vestibulum ut dolor aliquam, malesuada velit ut, vestibulum nibh. Maecenas at convallis ex, a aliquam dui. Mauris at eros sit amet leo gravida pulvinar.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus laoreet ipsum, facilisis facilisis quam ultrices et. Vivamus interdum ut tortor sit amet sollicitudin. Cras rhoncus blandit lectus sed maximus. Integer ac dui nec metus dignissim lobortis vel vel erat. Cras in dignissim arcu. Nunc vulputate mi turpis, at dignissim turpis ullamcorper vitae. Cras neque justo, sagittis ut tempus vitae, pellentesque a mi.
Duis vehicula eros erat, vel tincidunt ante aliquet eget. Ut malesuada, est a sollicitudin tincidunt, magna ante varius est, vitae pulvinar arcu neque sit amet magna. Sed sit amet erat fermentum, bibendum ex sed, dictum lorem. Ut aliquam nibh vitae tellus convallis, sed condimentum augue suscipit. Nunc ac tellus sem. Maecenas vitae finibus lorem. Ut et fringilla lacus. Morbi neque lacus, rhoncus non odio et, sodales ultrices erat. Pellentesque molestie et felis sit amet pharetra. Curabitur id lacinia dolor. Curabitur non dignissim lorem, eleifend posuere lorem. Aliquam orci felis, vulputate vel felis molestie, vestibulum tempor tellus. Quisque mollis mauris blandit posuere tincidunt. Suspendisse condimentum est at enim interdum condimentum.
Aliquam a risus cursus, pretium dui nec, consectetur elit. Sed sollicitudin consectetur magna id accumsan. Quisque interdum tristique diam, at porta orci condimentum ut. Curabitur in metus purus. Donec diam orci, volutpat eu rhoncus in, accumsan sed neque. Nam egestas vestibulum vestibulum. Mauris fringilla, enim in finibus hendrerit, metus urna finibus lacus, in dictum eros eros vel orci. Aliquam blandit elit sem, vel fringilla libero commodo eu. Cras euismod a mauris non malesuada. Aliquam luctus malesuada nisl sed efficitur. Mauris suscipit convallis venenatis. Ut varius velit vitae scelerisque fermentum. Donec luctus convallis hendrerit. Sed vestibulum, diam at euismod lacinia, dolor eros commodo lacus, vitae pellentesque dui metus vel leo.
In hac habitasse platea dictumst. Nam massa lectus, fermentum non dolor eu, auctor luctus ex. Duis posuere sit amet lorem ut commodo. Pellentesque ultrices in tortor vel dignissim. Quisque lorem nibh, ullamcorper in sem nec, rhoncus posuere tortor. Aenean vitae feugiat nisi. Proin elementum sollicitudin iaculis. Morbi nec erat volutpat, posuere augue quis, porttitor erat. Aliquam dignissim blandit laoreet. Donec consectetur a risus et varius. Suspendisse quis vulputate tellus.
Nunc eget erat id lacus dictum viverra. Vivamus vel vehicula ipsum. Fusce convallis leo diam, sed consectetur nulla sagittis rutrum. Curabitur nec ligula convallis ex rutrum fermentum. Donec auctor, erat quis euismod maximus, sem massa fermentum tortor, non scelerisque nibh nisi at arcu. Vivamus sodales fermentum nisi quis tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst.
Nunc et lacus ac augue tincidunt pellentesque. Sed at odio at sem lobortis vestibulum. Sed cursus augue et sapien eleifend tempor. Etiam suscipit mi non est vehicula tincidunt a vitae libero. In blandit fringilla lectus non dignissim. In interdum, nisl non suscipit sagittis, sem erat sagittis ex, quis egestas lorem tellus nec metus. Suspendisse suscipit ultrices nunc eget vulputate. Donec mollis condimentum massa. Suspendisse potenti. Fusce eget urna ut dui fringilla faucibus et id justo.
Suspendisse posuere justo eget bibendum venenatis. Pellentesque sollicitudin nisi augue. Nunc sed justo ac mi ultrices elementum sit amet non lorem. Maecenas accumsan vehicula urna, sit amet posuere dolor malesuada at. Morbi vitae mi sed est suscipit euismod. Aliquam erat volutpat. Nulla elit purus, elementum at odio eget, tempor efficitur leo. Nunc dapibus erat nec faucibus rhoncus. Curabitur accumsan nibh sit amet sagittis placerat. Donec mollis metus eu metus eleifend ornare.
</div>
</main>
</div>
I'm trying to achieve a layout with HTML/CSS that has a header with no set height, and a sidebar and content area next to each other below the header that take up the remaining height of the screen. In addition, the sidebar often has so many links that the links scroll off the screen, but instead of that happening, I would like to add a vertical scrollbar to just the sidebar section, and not have there be a scrollbar for the entire page.
I've been trying everything I can think of and find online, but nothing seems to be working. Here's some basic HTML/CSS to demonstrate the layout and the problem:
<!DOCTYPE html>
<html>
<head>
<style>
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow-y: scroll;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
Does anyone have any good ideas and/or know how to solve this problem? Thank you.
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
height:100vh;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
height:1px ;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow: auto;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
overflow :auto ;
}
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper porta ante, sit amet euismod ipsum venenatis vitae. Mauris ut tristique nibh, a ultricies nulla. Nullam fermentum eu mi ac cursus. Integer semper suscipit ex eu mattis. Phasellus iaculis ultricies ornare. Suspendisse ut nisi diam. Nunc pellentesque lacinia turpis vehicula pharetra. Aenean aliquam cursus elit nec fermentum. Morbi sed tempor nunc. In efficitur arcu ut finibus ultricies.
Suspendisse cursus semper semper. Praesent elit metus, venenatis vitae dictum eu, viverra ut tellus. Vestibulum ornare dui sit amet enim consectetur ornare. Cras porttitor nisl ultrices erat laoreet, ut ultricies quam condimentum. Duis a magna quis mi consequat facilisis id id dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer suscipit odio nibh, quis fermentum tellus hendrerit et.
Nam et euismod eros, id porttitor velit. Ut eget porttitor nibh, non interdum magna. Donec facilisis quis orci pharetra semper. Curabitur hendrerit massa interdum lacinia cursus. Aenean rutrum, lectus non efficitur sodales, sem lacus volutpat lectus, sed pharetra nisl metus in tortor. Integer eu turpis turpis. Phasellus eu placerat metus. Aenean ac massa consequat, consequat erat non, sollicitudin mi. Vivamus porttitor mattis accumsan.
Duis justo elit, finibus quis hendrerit at, ultricies quis nulla. Donec lobortis orci libero, eget dictum ipsum cursus ut. Phasellus vitae pellentesque risus. Mauris et dictum eros. Donec consectetur erat odio, nec semper nibh lacinia ac. Vestibulum rutrum laoreet rhoncus. Fusce dictum ut dui a fermentum. Donec hendrerit volutpat elit non ornare. Curabitur at neque semper, blandit lorem et, varius eros. Suspendisse nec turpis nec diam gravida pharetra.
Morbi turpis nulla, feugiat et egestas in, tempor sit amet ipsum. Nam ac arcu aliquet, congue ipsum ut, lacinia velit. Nulla neque nulla, vulputate in ex nec, laoreet gravida enim. Sed finibus turpis quis dapibus tincidunt. Phasellus elementum tincidunt neque sed porta. Etiam non finibus libero, vitae ullamcorper erat. Nullam lobortis eget diam eget vestibulum. In non dolor sed mauris finibus tempus non et justo. Nam convallis nec elit quis tempor. Vivamus ultricies pellentesque lectus nec commodo. Sed et molestie lacus, non gravida enim. Vivamus feugiat tempus ipsum ac eleifend. Nulla id mi tempor, tincidunt justo fermentum, convallis orci.
Fusce finibus placerat sapien at luctus. Mauris non velit diam. Vestibulum vel porta tellus, aliquet vulputate mi. Aenean a turpis ac urna gravida porta et sit amet ante. Phasellus vehicula feugiat leo ut faucibus. Curabitur porta, leo id auctor viverra, lorem nulla maximus turpis, eu laoreet leo risus id urna. Nullam finibus lectus ante, eget ultrices velit tempor ut. Maecenas quis tincidunt tortor. Nam eu facilisis libero. Morbi fermentum dolor sit amet lorem dictum aliquet. Curabitur porta nisl sed velit facilisis rhoncus. Duis eu eros quis metus blandit efficitur. Aenean venenatis est ante. Vestibulum quis laoreet dolor, sed bibendum metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras feugiat, dui vel lacinia scelerisque, lacus urna tempor quam, sit amet iaculis diam nulla et felis.
Curabitur ac accumsan arcu. Donec at euismod nisi, sit amet interdum sapien. Phasellus efficitur, felis ut condimentum accumsan, tortor ipsum convallis massa, ac iaculis quam metus quis nulla. Fusce vel turpis porta, tempor ex non, eleifend ante. Etiam nibh erat, interdum eget commodo nec, interdum eu orci. Vivamus eleifend nunc sed neque cursus pretium. Vestibulum non nisl eros. Fusce cursus tristique eros a finibus. Mauris vel massa tempor, vestibulum lorem in, bibendum urna. Donec cursus dolor nunc, sed lobortis tellus scelerisque ut. Nunc venenatis tincidunt neque eu gravida. Vestibulum quis ante eu velit interdum vulputate.
Vivamus sit amet mollis justo. Quisque sit amet molestie libero. Nam ut tempor dui, a commodo tortor. Quisque vehicula congue maximus. Proin dignissim ante nisl, eget ullamcorper lorem vestibulum sed. Vestibulum commodo porttitor vulputate. Sed augue ante, hendrerit et tincidunt maximus, pretium et tellus. Morbi et tortor eu nisl dignissim pulvinar. Morbi dignissim dictum metus vel lobortis. In sit amet tellus sit amet dui auctor tincidunt ac in nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id metus lacinia, cursus ex in, gravida nibh. Ut mollis mi at urna gravida, in sagittis sem dictum. Nullam pretium dolor mauris, eget lobortis libero euismod a. Maecenas aliquet dolor dolor, cursus malesuada erat ornare ac.
Pellentesque ultrices semper tortor non fermentum. Fusce pellentesque fermentum justo eu placerat. Donec tincidunt dolor id nunc vehicula mattis. Suspendisse fermentum libero vel est sollicitudin, non interdum urna placerat. Cras dignissim nibh id tincidunt pellentesque. Quisque ac cursus enim. Phasellus pretium varius aliquam. Mauris arcu enim, posuere sit amet est eu, vestibulum euismod sapien. Etiam sed velit consequat, dictum turpis eu, vehicula orci. Morbi tincidunt sit amet erat in mattis. Curabitur ac nisi sit amet ipsum ultrices tempus vel et est. Vivamus ornare dolor vel ligula ultrices tempor.
Nunc id ultrices sapien. In hac habitasse platea dictumst. Quisque tempus cursus tellus, quis ultricies neque commodo ut. Integer bibendum orci vitae metus fringilla, quis tristique dui iaculis. Vestibulum eu velit et leo facilisis rhoncus sit amet at tortor. Morbi dignissim ante ut neque lacinia dictum. In vel risus at ex lobortis laoreet et nec leo. Mauris rutrum orci sollicitudin ex rhoncus ultrices.
Nunc dapibus pulvinar ex sed sollicitudin. Donec nec luctus tortor. Phasellus porta, ipsum sit amet sagittis sagittis, lectus sem vestibulum enim, et placerat velit diam sit amet leo. Curabitur turpis mi, eleifend eu porttitor mattis, aliquam sed ipsum. Pellentesque gravida condimentum sem, id laoreet erat vulputate in. Nulla facilisi. Mauris in eros vel sapien accumsan viverra eget sed est. Ut arcu orci, accumsan faucibus ipsum ut, accumsan luctus eros. Proin eget dui aliquam, dictum elit in, malesuada odio. Sed non arcu molestie, dignissim odio ut, sagittis neque. Duis sit amet quam massa. Mauris tempor, eros a placerat ornare, odio dui dapibus orci, quis feugiat libero neque posuere quam. Sed gravida velit purus, ut laoreet tortor mollis sit amet. Aliquam rutrum non lorem nec interdum. Pellentesque ornare blandit mattis.
Aliquam non commodo felis. Maecenas scelerisque elementum arcu, at tincidunt elit fringilla et. Nam ut felis dapibus elit accumsan sollicitudin id at ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque tincidunt mi interdum dui porta, ut tristique nibh auctor. Vestibulum in aliquam quam. Ut suscipit fringilla tellus, et elementum ligula finibus id. Curabitur auctor tincidunt finibus.
Donec sit amet orci pharetra, tempor orci in, placerat felis. Cras aliquam augue a lacus molestie, efficitur ultrices odio porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend arcu quis eros ultricies lobortis. Curabitur dignissim mi id feugiat finibus. In eu sodales sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Sed nec auctor velit. Vivamus pellentesque eget risus eu luctus. Etiam ac odio vitae quam semper vulputate quis non nulla. Pellentesque eget luctus turpis, quis volutpat tellus. Sed commodo accumsan magna ut dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut congue, magna id sagittis cursus, neque risus ultricies libero, et posuere est est ac mi. Donec quam urna, lobortis nec nibh convallis, auctor vehicula augue. Vestibulum turpis massa, placerat ut felis sit amet, maximus malesuada turpis. Integer scelerisque nisl sagittis, tempor quam vitae, feugiat tellus.
Phasellus efficitur, risus eget suscipit rhoncus, enim enim tempor elit, id tempor nibh metus vel elit. Suspendisse mattis lacinia sollicitudin. In urna dolor, eleifend a cursus ac, varius a lectus. Phasellus vestibulum, libero id congue venenatis, risus leo fringilla odio, ac dapibus augue enim vestibulum mauris. Nulla sit amet dignissim sem. Sed convallis eros non neque laoreet mollis. Sed at ex ligula. Vivamus luctus, urna nec fringilla faucibus, nisl est accumsan quam, eget gravida nisl odio at sem. In lacinia, diam ut faucibus pellentesque, mi ligula elementum est, et porta mauris tellus sit amet eros.
Donec luctus quis dui vel ornare. Vestibulum feugiat enim et semper tempor. Nullam dictum pellentesque orci. Aenean eleifend dolor at condimentum tincidunt. Sed molestie felis vel ipsum ullamcorper vulputate. Donec vel urna ac mi consectetur imperdiet eget eu arcu. Curabitur elit ante, sollicitudin vel convallis sed, molestie id justo. Vivamus lacinia risus eu mi suscipit gravida. Ut vitae ex pulvinar, rhoncus erat non, efficitur purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec est velit, ultricies a lacinia sed, faucibus ut erat. Nullam ut mi tincidunt, porttitor lacus sed, euismod velit. Nunc scelerisque lacus a lectus eleifend, tempus mollis urna rutrum.
Nam eget lobortis nisl. Pellentesque sed venenatis elit. In auctor volutpat posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut cursus nunc augue, ac egestas tellus iaculis eu. Vivamus ultrices cursus mauris, ac bibendum eros accumsan eu. Aliquam id tincidunt purus. Sed sodales consectetur odio porttitor pulvinar. Donec sodales mattis sem, id elementum leo ornare at. Aenean blandit id magna a placerat.
Suspendisse quis tincidunt leo. Maecenas sapien massa, consequat at pharetra et, sodales vel velit. Ut convallis volutpat nibh id eleifend. Vestibulum molestie mauris ac ornare fringilla. Aliquam ipsum felis, fermentum eu lacinia nec, faucibus at nunc. Donec imperdiet, turpis non consectetur sodales, orci dolor ultricies magna, quis porttitor massa ligula ultrices magna. Vivamus auctor neque eros, nec dictum nulla vestibulum non. Pellentesque luctus, urna nec imperdiet maximus, nisi nibh suscipit ipsum, eget luctus leo ex quis lorem. Praesent in ex vitae urna laoreet imperdiet. Phasellus pulvinar ipsum vitae dui ultrices suscipit. Aenean est ipsum, ornare eget porta sit amet, tincidunt sed dui. Nam et urna porttitor, tempor magna ac, semper nisi. Vestibulum nisl purus, laoreet non ex a, ultricies finibus dolor.
Maecenas id sapien semper, luctus ante in, aliquet mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio magna. Aliquam pulvinar euismod ligula eu imperdiet. Integer condimentum nulla magna, feugiat ullamcorper ipsum dictum ac. Suspendisse id tempor neque, vitae blandit urna. Fusce eget tempus erat. Sed sit amet elit vitae nisl maximus dictum eget et nisl. In egestas at leo sed lacinia. Pellentesque at hendrerit neque, quis pharetra nunc. Donec dignissim erat in libero porttitor cursus.
Maecenas pellentesque tempus dapibus. Aenean sodales interdum dolor, sed iaculis erat luctus ac. Morbi interdum feugiat nisi, sed eleifend quam vehicula a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed malesuada arcu sed lectus placerat, eget blandit purus luctus. Cras tristique ligula neque. Vestibulum finibus nunc ac ex ultricies, eget aliquam leo iaculis. Duis vestibulum imperdiet eros in vulputate. In ex odio, dictum aliquet dui at, elementum ultricies justo. Ut pulvinar condimentum dui, tincidunt faucibus nunc tempor at.
Quisque eleifend diam a lorem euismod, vitae dictum eros euismod. Pellentesque sed vehicula ante, ut laoreet libero. Suspendisse eget massa sollicitudin tortor viverra ultrices id vitae lorem. Donec sagittis nunc ut hendrerit lacinia. Donec elementum tellus efficitur felis cursus mollis. Etiam quis erat massa. Nullam eu dui felis. Suspendisse pulvinar leo augue, vel fermentum ex feugiat sed.
Morbi sagittis fermentum massa, vitae dictum orci. Aliquam fringilla, elit at condimentum congue, lacus libero porttitor urna, vel efficitur ante ante pulvinar risus. Aenean non enim nulla. Nullam eget elit ut lorem tincidunt malesuada. Curabitur dapibus eros molestie felis commodo tristique. Quisque non mi in nunc ultrices malesuada at ut dolor. Nullam metus mauris, aliquam id accumsan ac, efficitur ut felis. Ut purus lacus, consectetur quis dolor a, sagittis luctus est. Praesent tristique interdum sapien ut scelerisque. Proin nisi sem, luctus eu massa vitae, tincidunt tristique urna. Phasellus a nibh ut magna pretium convallis eget non justo. Ut id arcu sit amet nisi sollicitudin convallis sed sed dolor. Proin fermentum non ex et volutpat. Donec vitae erat rutrum, laoreet dui at, egestas arcu.
Etiam lobortis sodales mollis. Maecenas nec neque malesuada est ullamcorper venenatis eget ut lacus. Suspendisse maximus pretium tincidunt. Etiam a auctor mi. Morbi sollicitudin metus nec dolor porttitor, ac placerat arcu tempus. Sed turpis mi, cursus sit amet egestas ac, consequat sit amet nulla. Suspendisse dapibus malesuada blandit. Donec aliquet ligula urna, vel venenatis nibh facilisis sed.
Fusce volutpat ex et leo sagittis, eu posuere sapien scelerisque. Proin eget nisi sed metus accumsan suscipit in id leo. Quisque ac rutrum velit. Nulla id convallis libero. Duis euismod feugiat sodales. Aenean placerat, est nec convallis luctus, massa leo finibus nunc, in viverra dolor nunc at arcu. Cras lobortis rutrum vestibulum. Integer pellentesque placerat sapien non mattis. Maecenas in velit mi. Cras finibus in felis nec ullamcorper. Aenean ut est et felis elementum efficitur at vitae lacus. Maecenas aliquam dapibus massa, et semper lacus vulputate et.
In imperdiet convallis tellus ut semper. Quisque placerat eros id condimentum faucibus. Nulla et faucibus elit. Nunc tincidunt risus eget velit cursus semper. Etiam viverra nibh eget turpis gravida ultrices. Cras eget iaculis tortor, vehicula consequat est. Pellentesque blandit nisl id neque ultrices, in tempus quam facilisis.
Aenean feugiat felis sed ligula tincidunt suscipit a elementum dui. Phasellus laoreet lorem sit amet nisi varius, sit amet tincidunt augue dictum. Ut dictum ipsum finibus, pellentesque odio vel, accumsan odio. Proin porttitor risus lectus, commodo tristique diam commodo et. Integer ornare vel dui sit amet placerat. Quisque tellus purus, pharetra eget mi sit amet, faucibus imperdiet dui. Aliquam malesuada sapien eu enim laoreet, nec blandit lacus pulvinar. Ut in diam condimentum, iaculis mauris eget, venenatis ipsum. Donec finibus diam arcu, sit amet laoreet leo consectetur in. Duis erat turpis, consequat sed ornare sit amet, feugiat ac purus. Aliquam erat volutpat. Duis elit lacus, commodo id leo sed, congue consequat lectus.
Mauris facilisis et ligula id faucibus. Nunc non lobortis metus, tristique finibus tortor. Fusce interdum interdum felis elementum dignissim. Vivamus diam nisi, dictum dapibus consectetur ut, laoreet vel est. Vivamus posuere consectetur dui, in vehicula felis interdum nec. Pellentesque tincidunt magna turpis, a vehicula ante pellentesque sit amet. Nullam id feugiat nisl, eu blandit felis.
Suspendisse consequat enim at enim sagittis, sed feugiat tellus iaculis. Vestibulum volutpat dignissim porttitor. Vivamus at ante nec augue tempus laoreet. In volutpat risus at ipsum gravida tempus. Sed et vulputate dui. Praesent eget tempus mauris. Vivamus congue tellus at lacus sollicitudin luctus vitae quis est. Vivamus interdum nisi ut neque mattis, a suscipit lacus tempor. Vestibulum tellus orci, scelerisque sodales metus eu, cursus aliquam elit. Nunc porta fringilla turpis, ac varius arcu blandit ac. Nulla ornare ligula non tortor hendrerit dictum.
Aliquam lobortis, lectus sit amet blandit pulvinar, risus quam condimentum diam, convallis tristique lacus est non mi. Sed eu felis purus. Sed velit justo, posuere eget porttitor eget, vehicula vel neque. Suspendisse malesuada, nunc nec auctor cursus, lorem dolor rutrum dolor, ut scelerisque nibh nisi sed justo. Nullam ac orci non nisl varius porttitor. Vestibulum non lorem at mauris malesuada interdum vel quis dolor. Pellentesque porttitor erat vel sem venenatis feugiat eget vitae nisi. Sed tempus urna vitae egestas consequat. Curabitur vitae porttitor erat. In augue sem, sodales eget velit ut, pulvinar consectetur sem. Mauris rutrum erat vitae placerat egestas. Ut est odio, semper ut augue et, luctus sagittis risus. Curabitur ex est, ultrices nec neque consequat, dapibus malesuada magna. Aliquam erat volutpat. Vestibulum ipsum turpis, ultricies vitae tortor nec, malesuada sagittis orci.
Cras consequat mi odio. Proin vestibulum vestibulum efficitur. Ut et neque sapien. In sit amet ipsum in sapien molestie auctor ut eu diam. Aenean ornare erat ut felis faucibus, quis laoreet dui pretium. Praesent porttitor imperdiet mauris, eget consequat lectus lacinia a. Nam maximus eleifend velit, ut ultrices orci finibus nec. Donec id sapien ut erat fermentum vulputate in vel risus. Fusce neque ante, semper at euismod in, mollis sit amet neque. Fusce gravida pretium sapien, a eleifend nisi euismod sit amet. Vestibulum vulputate dapibus dolor non tempor. Proin eros velit, ornare vel ultrices non, faucibus at diam. Praesent pretium tempor arcu. Cras semper pellentesque commodo. Cras nec urna in tortor molestie varius in vitae odio. Ut finibus lacus ut est tristique suscipit.
Donec interdum magna urna, vel posuere nisi pellentesque sed. Nam quis mi sit amet quam laoreet eleifend. Aenean quis tellus non nulla auctor fringilla. Nunc felis arcu, volutpat quis porta vel, molestie at massa. Morbi vitae enim urna. Etiam euismod facilisis leo, vel dignissim nisi tempus sit amet. Aliquam aliquam cursus nibh, faucibus pharetra quam.
Maecenas luctus, velit ac malesuada egestas, leo nunc elementum neque, at porttitor ligula augue in odio. Sed tempus egestas dui, vitae varius metus volutpat id. Aliquam ornare, lacus posuere sollicitudin vehicula, felis diam consequat arcu, a laoreet nulla erat non nisl. Proin cursus ut tellus at condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin finibus enim et faucibus dignissim. Donec non ex vulputate, interdum orci ut, dignissim urna. Nulla rhoncus sollicitudin congue. Mauris semper arcu a massa malesuada scelerisque. Quisque ligula metus, condimentum nec interdum eget, efficitur in nunc.
Phasellus vel luctus dui, quis ornare orci. Etiam sollicitudin, neque at venenatis luctus, felis ante accumsan velit, nec molestie erat risus vel odio. In interdum maximus enim lobortis laoreet. Vivamus nisi odio, suscipit sit amet dui vel, consectetur mattis velit. Ut scelerisque sem eget tortor hendrerit, non bibendum enim rhoncus. Aenean id sem feugiat, eleifend leo nec, volutpat diam. Phasellus eget semper elit. Suspendisse vitae magna a ligula hendrerit malesuada. In magna velit, luctus at eros vitae, dignissim vehicula neque. In quis ex vel risus imperdiet feugiat eu vestibulum lorem. Nullam porttitor enim sed leo ornare, ac posuere tortor molestie. Fusce accumsan rutrum dictum. Aenean in erat neque. Maecenas rhoncus enim id nisl posuere, vel tristique neque vehicula. In efficitur, mauris non semper semper, justo mauris gravida ligula, ac bibendum sem lacus et diam. Nullam gravida sit amet diam et tristique.
Nulla urna justo, condimentum ut rhoncus vel, imperdiet sed mi. Aliquam venenatis, neque et facilisis placerat, dui felis lobortis diam, a pulvinar nibh velit fermentum tortor. Quisque nec commodo nibh, vitae varius elit. Cras sem dolor, fermentum ac dignissim eget, mattis in libero. Vivamus condimentum, diam et consectetur blandit, elit elit faucibus justo, condimentum rhoncus dui mi a ipsum. Aenean sit amet tellus leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eu sodales ipsum. Etiam blandit nibh sit amet nunc interdum viverra. In hac habitasse platea dictumst. Sed eget ligula nec metus vestibulum elementum. Nulla in dolor eget risus laoreet fermentum. Aenean vitae accumsan erat, ac fermentum libero. Fusce efficitur tincidunt nibh, vel fringilla orci consectetur vitae. Ut eget porttitor mi.
</div>
</div>
</div>
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'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>
So I have 2 divs, side by side.
Each div has a different background color.
The first div has very little content.
The second div has a lot of content.
At certain screen resolutions the second div will overflow.
I need the first content to stretch to the height of its neighbor.
I thought flexbox align-items: stretch achieved this, but it doesn't appear to work.
There is a working model here: http://codepen.io/mildrenben/pen/MwxeJv
HTML:
<div class="wrap">
<div class="first">
First div content
</div>
<div class="second">
// A Ton of content
</div>
</div>
CSS:
html,
body {
width: 100%;
min-height: 100%;
}
.wrap {
height: 100%;
display: flex;
align-items: stretch;
}
.first,
.second {
height: 100%;
width: 50%;
}
.first {
background: green;
}
.second {
background: blue;
}
Change the wrap height to min-height...and
.wrap {
min-height: 100%;
display: flex;
align-items: stretch;
}
.first,
.second {
flex:1 ;
}
html,
body {
width: 100%;
min-height: 100%;
}
.wrap {
min-height: 100%;
display: flex;
align-items: stretch;
}
.first,
.second {
flex: 1;
}
.first {
background: green;
}
.second {
background: blue;
}
<div class="wrap">
<div class="first">
First div content
</div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget semper dui. Suspendisse potenti. Sed sit amet arcu ante. Praesent vel commodo mi. Morbi eget diam id mi pellentesque gravida. Integer quis placerat quam. Morbi eu nunc eu neque feugiat
interdum. Etiam est dui, ullamcorper quis accumsan eget, vulputate non odio. Praesent auctor quam vitae enim tincidunt blandit. Nunc fringilla rhoncus dignissim. Pellentesque pellentesque commodo dolor at posuere. Morbi scelerisque ante quis odio
luctus aliquam. In et libero quam. Maecenas tincidunt eu diam at lobortis. Phasellus eu ipsum molestie lectus luctus sodales. Mauris blandit sed ante quis suscipit. Etiam porta dolor dui, a gravida quam tempor quis. Praesent eu varius mi, a vulputate
ipsum. Praesent vestibulum felis a mi auctor fringilla. Integer dignissim vehicula felis, hendrerit tincidunt elit dictum vel. Sed eu vestibulum augue. Nulla facilisi. Donec ut augue velit. Praesent eget auctor mi. Pellentesque vel tempus eros, in
congue sapien. Phasellus egestas pulvinar libero non suscipit. Nam facilisis bibendum ex vel blandit. Vivamus vulputate nibh vel facilisis porttitor. Fusce et blandit augue. Quisque rutrum lorem in sapien dictum, nec viverra magna posuere. Nullam
sodales molestie augue ac volutpat. Proin sit amet gravida nunc. Sed justo sapien, rutrum ut enim non, efficitur finibus lacus. Sed euismod porttitor ex, eu finibus dui dignissim at. Donec mollis risus urna, nec feugiat leo molestie eget. Nam pellentesque
malesuada ante, non vehicula dui pulvinar non. Pellentesque lorem eros, blandit sit amet pretium porta, bibendum nec magna. Nam vel turpis sed massa dictum pulvinar. Cras egestas aliquam tellus, nec pulvinar est laoreet in. Praesent nec nunc et ipsum
condimentum ultrices et aliquam urna. Ut tincidunt aliquam libero. Sed laoreet ultricies tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempus tortor mauris, sed interdum tellus finibus
eu. Suspendisse pulvinar consequat diam, non dapibus odio euismod a. Nulla leo ante, pulvinar quis iaculis a, efficitur ut sapien. Fusce vitae egestas libero. Praesent vel turpis ut erat lobortis auctor laoreet vitae diam. In scelerisque est ac imperdiet
ullamcorper. Sed sem elit, luctus ac dui non, facilisis fermentum est. Ut ac nisi non massa faucibus dictum non finibus eros. Donec finibus nibh et pretium lobortis. Pellentesque placerat tincidunt vulputate. Aliquam feugiat porta ipsum, ut fringilla
neque placerat id. Cras auctor elit at enim aliquet consectetur. Pellentesque mollis neque justo, ut porttitor libero tristique dapibus. Donec sed dolor orci. Nunc ultrices feugiat velit non scelerisque. Sed et urna non sem efficitur scelerisque eget
sit amet arcu. Cras hendrerit egestas est, in pretium ante tempor id. Nam eleifend, diam ac hendrerit molestie, eros tellus vulputate ante, sed facilisis orci massa vel leo. Ut lacinia justo sit amet ex sagittis eleifend. Etiam suscipit eget metus
ac ornare. Etiam egestas, ex nec pretium accumsan, metus erat lobortis lacus, et laoreet tortor mauris ac ante. Vestibulum arcu odio, tristique eu tristique non, dictum ac lacus. Maecenas nec dignissim felis. Fusce elit dolor, interdum in semper ac,
interdum ullamcorper ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin nec neque magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean et nunc commodo, gravida magna id, iaculis massa.
Sed viverra ornare euismod. Nunc et massa non neque condimentum sodales. Vivamus maximus porta felis, sed tristique tellus auctor quis. Maecenas ipsum risus, luctus eget arcu eu, dapibus tempor dolor. Proin hendrerit, dolor vel facilisis faucibus,
turpis nisi lacinia urna, ullamcorper vulputate diam nulla congue dolor. Vivamus sodales leo non aliquam imperdiet. Mauris ut sapien facilisis, pretium mi quis, malesuada felis. Proin ac sagittis enim. Aliquam et nisi in erat rutrum varius eget eget
sapien. Phasellus eget justo at sapien porttitor elementum. Phasellus eget mauris odio. Aliquam erat volutpat. Morbi convallis, ex vitae dapibus mollis, odio justo lobortis augue, et mattis ex libero sit amet tortor. Donec suscipit, odio in aliquet
aliquam, mi tellus dictum orci, sed cursus massa nulla id erat. Suspendisse potenti. Praesent nulla lorem, venenatis ut lacinia ut, hendrerit quis lorem. Vestibulum eget nulla efficitur, lacinia dui sit amet, condimentum arcu. Nam facilisis mauris
vitae turpis ullamcorper sollicitudin. Phasellus feugiat erat a diam viverra, sed fringilla est egestas. Fusce at ex est. Sed rutrum feugiat libero, quis ullamcorper libero imperdiet vel. Mauris efficitur tortor faucibus urna cursus hendrerit. Vivamus
quis posuere leo. Nullam dignissim blandit metus, nec volutpat mi tristique quis. Pellentesque tempus risus eget nibh dapibus fringilla. Suspendisse consectetur, nisi at condimentum venenatis, enim sem rutrum urna, sit amet sollicitudin ex mi semper
urna. Nullam vehicula, augue ac congue mattis, nunc odio feugiat orci, sed porta odio odio mattis augue. Proin semper ut dolor ut fermentum. Pellentesque consequat pellentesque urna quis faucibus. Sed elit turpis, scelerisque in commodo ut, semper
quis augue. Nulla maximus quam et lacus viverra, ut scelerisque diam varius. Phasellus viverra auctor dictum. Praesent vehicula vel arcu in ornare. Sed faucibus, odio et gravida faucibus, diam mauris gravida diam, id bibendum turpis lorem nec odio.
Duis turpis augue, pulvinar et leo non, venenatis lacinia elit. In hac habitasse platea dictumst. Phasellus at iaculis ipsum. Quisque ultrices lacus eu elementum feugiat. In interdum mi ut quam sodales, in iaculis eros euismod. Suspendisse fringilla
enim in sapien luctus, id commodo nisi aliquam. Donec sagittis at dolor ut convallis. Mauris a felis suscipit velit rutrum hendrerit. Vestibulum semper diam metus, nec tempus arcu feugiat in. Proin a nibh eu tellus faucibus dictum eu a enim. Pellentesque
sed tempor turpis, id cursus massa. Suspendisse dolor velit, eleifend ut lacinia id, sodales id arcu. Maecenas id magna ut ligula laoreet faucibus. Vivamus tincidunt nibh id urna pulvinar auctor. Ut quis convallis lacus. Phasellus pellentesque leo
luctus placerat ultricies. Quisque mollis dui lorem, rhoncus pulvinar justo sagittis sed. Aenean et diam id nisi mollis facilisis sit amet ac magna. Maecenas id consequat justo. Nunc laoreet massa et viverra aliquam. Vivamus imperdiet hendrerit vestibulum.
Fusce orci odio, pharetra in imperdiet sed, tempor sed arcu. Ut feugiat massa urna, vitae vestibulum magna tincidunt et. Ut varius volutpat urna vel venenatis. Nullam tempor sapien sed pellentesque sodales. Vivamus luctus turpis erat, eget auctor
metus tincidunt ut. Aenean ut consequat nisl. Donec at tincidunt turpis. Suspendisse sollicitudin, turpis id semper hendrerit, eros urna facilisis tellus, eget mattis ex velit sit amet leo. Donec sollicitudin massa nunc, vehicula efficitur sapien
mollis nec. Nam hendrerit turpis arcu, ut facilisis ipsum vestibulum fringilla. Sed quis rutrum orci, id dictum diam. Ut faucibus mi nulla, at lobortis nisi suscipit at. Nunc at tincidunt arcu, vel commodo lorem. Sed leo ipsum, ultricies vitae fringilla
ac, venenatis non quam. Donec congue tristique massa, sit amet pretium erat ullamcorper convallis. Donec efficitur et enim eu finibus. Fusce consectetur elit turpis, vel tempor felis laoreet quis. Donec semper maximus aliquet. Nullam velit augue,
lobortis ut vehicula vitae, ullamcorper id lacus. In fringilla ullamcorper justo. Sed consectetur, nulla eu scelerisque tincidunt, dolor dui laoreet neque, quis mattis odio enim non ligula. Morbi varius nulla quis nibh vestibulum, vel consequat velit
sollicitudin. Nullam cursus lacus porttitor ligula egestas, et varius velit pharetra. Aliquam vitae nibh et augue lobortis maximus ac at mi. Cras semper eget elit nec tristique. Sed cursus lorem augue, facilisis vestibulum felis pretium eget. Duis
id erat dui. Sed vitae enim quam. Cras vel malesuada nisi. Pellentesque vitae aliquam tellus. Aliquam gravida at ante gravida facilisis. Donec a imperdiet risus, sed eleifend enim. Vestibulum accumsan id nunc et pellentesque. Phasellus maximus enim
ut augue hendrerit pharetra. Cras dictum mauris sollicitudin massa fermentum, sed ultricies elit tempus. Maecenas pellentesque efficitur ligula in fermentum. Donec eleifend lorem et odio lacinia posuere. Etiam varius non tortor id elementum. Etiam
tellus lacus, sagittis dapibus porta quis, porta nec mi. Nam sed massa ipsum. Cras maximus ipsum eget maximus molestie. Integer dictum leo at ex aliquam pretium. Ut sed ullamcorper sem, at suscipit elit. Sed ac massa mollis, elementum sem nec, consequat
mi. Vestibulum sodales magna eget velit imperdiet molestie. Vestibulum tortor odio, egestas id aliquet eu, lacinia eget mi. Vivamus auctor, tortor vel dapibus suscipit, felis sem ullamcorper mi, ac tempus nisl velit sed purus. Sed eget blandit mauris.
</div>
</div>
Codepen Demo