I have a fixed div at the bottom of my page, but it is covering up another div that is behind it. How can I make it where the markup behind the fixed div can be scrolled? My end goal is to have the buttons fixed at the very bottom but if the content is behind the buttons then allow the scrollbar to show. I tried adding an over-flow:auto, but it didn't change. My assumption why that didn't work is because the viewport does think that the div behind the button is viewable...But the fixed position div just has a higher z value so it's just going to cover it anyways. I don't want to add any padding to accommodate the empty space.
Parent Container
.page-container {
padding: 10px;
position: relative;
.page-title {
margin-bottom: 15px;
}
.page-title-fixed {
position: fixed;
left: 0;
right: 0;
margin-top: -15px;
padding: 15px;
margin-bottom: 0;
padding-bottom: 0;
background: $bgGray;
z-index: 999;
.page-title { margin-bottom: 0; }
}
}
Fixed Buttons styling
style={{
position: 'fixed',
bottom: 0,
left: 0,
height: 60,
width: '100%',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f6f6f6',
borderTop: '1px solid #e0e0e0'
}}
If I understand what you're asking, you want to have a fixed element, but you need to be able to scroll down through body content without the fixed element obscuring the body content?
If so, the simplest way is to add padding to the bottom of the body content equivalent to (or higher) than the fixed element. This will ensure that as you scroll all the way down you won't have text fall behind the fixed element.
(If I misunderstood please clarify and I'll try to help further)
.content {
width: 100%;
height:90%;
padding: 20px;
font-family: sans-serif;
/* This doesn't let the text fall behind the fixed element */
padding-bottom: 90px;
}
.fixed {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
background: #007ccc;
color: #fff;
font-family: sans-serif;
padding: 30px 0;
text-align: center;
}
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo tristique orci id tincidunt. Aliquam erat volutpat. Aliquam erat volutpat. Etiam hendrerit, nisi non pharetra laoreet, mauris odio ultricies ligula, id convallis dolor augue vitae velit. Praesent condimentum metus at turpis consequat, sed posuere orci euismod. Suspendisse in quam facilisis, imperdiet dolor at, dignissim risus. Mauris ut libero ante. Donec porttitor nibh sit amet massa tristique efficitur. Aenean commodo vel nisi ac lacinia. Etiam in faucibus enim, eget vehicula sem. Etiam justo nunc, bibendum id ligula nec, ultrices accumsan lorem. Mauris imperdiet augue vitae vulputate efficitur. Donec id sapien dui. Nam lacus nibh, cursus sed laoreet a, feugiat id arcu. Cras sed ultricies nibh, pretium placerat augue.
Maecenas mattis arcu augue, interdum rhoncus mauris condimentum at. Donec pharetra eleifend tincidunt. Sed iaculis orci id ex dapibus scelerisque. Aenean euismod felis sit amet enim dictum, sed pellentesque nisi rutrum. Pellentesque iaculis massa non massa aliquam volutpat. Praesent interdum varius orci, in ullamcorper turpis eleifend at. Phasellus in cursus lacus, at ultricies mauris. Pellentesque tristique tellus non pharetra vulputate. Proin sodales felis est, sit amet ornare turpis blandit eu.
Nulla finibus purus vel elit vehicula, ut tincidunt diam suscipit. Nullam sed congue nisi, eget venenatis felis. Integer hendrerit est sit amet elementum tempor. Duis molestie mi id consequat semper. Donec rutrum sed lectus et pellentesque. Vestibulum sit amet ligula elit. Donec et felis at mi volutpat finibus. Suspendisse vitae libero gravida, gravida erat non, mattis turpis. Cras facilisis porta diam, vel molestie libero hendrerit sed. Proin imperdiet commodo metus non pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tristique elit eu blandit imperdiet. Suspendisse tincidunt turpis at orci tincidunt molestie. Vestibulum dapibus maximus augue, ut cursus ante convallis non.
Nulla id feugiat nulla, at placerat ipsum. Sed id turpis quis mauris vehicula eleifend vel at risus. Vestibulum dictum orci in augue finibus, a lacinia nisi rutrum. Cras vehicula sodales enim sit amet maximus. Donec in justo porta, volutpat mi eget, feugiat elit. Nunc bibendum bibendum quam sit amet pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ipsum tellus, tincidunt nec laoreet sit amet, semper in lorem. Donec suscipit risus quis pellentesque porta. Duis ac felis lobortis, blandit purus eu, dapibus arcu. Nullam semper varius felis nec gravida. Nullam feugiat convallis porta.
Praesent mollis urna ex, a luctus dui tristique et. Nulla bibendum tristique erat, ac consequat ligula suscipit ut. Morbi turpis nulla, facilisis et maximus eu, pretium et magna. Integer egestas est id neque dictum ullamcorper. Etiam consequat dolor at nulla maximus, id dictum dui laoreet. Sed mattis ex in tortor malesuada sagittis. Nulla facilisi. Maecenas sapien erat, pretium ac dignissim nec, tincidunt ut nisi. Quisque tincidunt volutpat dui, ut vulputate nunc lobortis a. Mauris felis nisl, imperdiet varius iaculis sit amet, tempor ac erat. Proin sodales elementum finibus. Fusce ut ultricies nisl, sed venenatis justo. Pellentesque diam urna, semper et risus at, placerat finibus risus.
Sed sagittis mattis lorem, vitae dictum nunc egestas a. Sed pretium orci vitae ipsum pretium posuere. Sed commodo dui eget dignissim luctus. Nullam ullamcorper libero cursus libero lobortis, nec tempus eros varius. Fusce massa ligula, lacinia in quam sit amet, placerat ullamcorper tellus. Donec convallis justo non sem viverra hendrerit. Sed ac vestibulum ipsum, ac euismod augue. Donec tempus dignissim arcu in bibendum. Donec placerat vitae nunc consequat laoreet. Vivamus sagittis interdum arcu et interdum. Aliquam ullamcorper fringilla ultrices. Nulla tempus risus at interdum sagittis. Praesent ultrices, ex at viverra ultricies, lectus augue tempus justo, id luctus leo augue sed urna. Quisque nec mi et risus blandit volutpat. Nulla at purus in nunc tincidunt lacinia et eu libero.
Donec velit nibh, fringilla eu condimentum vitae, dapibus sed nibh. Nunc urna tellus, iaculis non congue id, posuere sit amet neque. Curabitur vehicula finibus orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed facilisis tortor sed mauris vehicula, vel commodo nisi faucibus. Duis sit amet euismod nisi. Duis efficitur, dolor ut ultrices accumsan, purus purus cursus felis, ac sodales libero justo efficitur magna. Morbi tellus tortor, tempor in mauris at, dapibus iaculis diam. Suspendisse condimentum magna nec libero dignissim, eu fermentum justo lobortis. Mauris ut dapibus lacus. Nullam ligula ipsum, posuere id lacus et, ultricies blandit sapien. Integer enim nisl, euismod eu venenatis a, consectetur sit amet ante. Aenean eu porta ipsum.
Aenean a lobortis massa, id efficitur tellus. Maecenas bibendum orci non imperdiet accumsan. Ut luctus magna id mi lacinia, in feugiat justo porta. Phasellus efficitur elementum tellus, in porttitor enim semper non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam cursus justo non aliquam posuere. Nunc tempor eget dui quis rhoncus. Nulla facilisi. Curabitur nec maximus nunc, condimentum accumsan massa.
Fusce justo leo, laoreet quis consectetur sed, cursus sed purus. Sed eget tincidunt velit. Donec id lectus a urna volutpat dictum. Aliquam commodo tincidunt lectus, a viverra enim. Nulla nec ante porttitor nunc sagittis tempus. Praesent volutpat porttitor est nec aliquet. Praesent aliquam aliquam leo laoreet ultricies. Mauris cursus leo at tortor ornare, et dictum libero fringilla. Ut massa est, fringilla eget nisi non, iaculis semper ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue pellentesque arcu ac laoreet. Nam eu malesuada justo.
Ut egestas ornare tellus nec iaculis. Sed sit amet purus eu diam interdum tempus. Integer bibendum dignissim justo. Suspendisse sed arcu faucibus ex aliquet feugiat. Nulla vestibulum, felis sed ultrices varius, tellus purus rutrum diam, vitae molestie enim nulla non dui. Duis ultricies mi tortor, sed molestie sem rhoncus vel. Quisque tincidunt viverra sapien, sed tristique justo volutpat sed. Nunc tempor sit amet nulla vel tincidunt. Suspendisse pellentesque facilisis sapien id faucibus. Donec sodales finibus augue, ut volutpat est auctor sit amet. Sed rutrum, lacus at rhoncus condimentum, tortor lectus porta eros, et blandit nibh elit in diam. Pellentesque semper et metus eget posuere. Integer at velit elit. Praesent non malesuada nisl.
Duis ut lacus tellus. Vivamus aliquam magna eu sem suscipit, non bibendum mauris lobortis. Donec placerat purus eget tortor blandit, at iaculis nibh pretium. Cras quis sollicitudin erat. Ut finibus mollis sem et vehicula. Mauris rutrum gravida blandit. Sed velit mi, congue vel arcu sit amet, mollis laoreet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a hendrerit nunc. Pellentesque aliquam dictum arcu, eu mattis nunc consectetur nec. Fusce a malesuada turpis, in venenatis mi.
Maecenas nisl lorem, hendrerit vel dignissim id, efficitur et ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum molestie neque ut imperdiet vestibulum. Ut a felis et ligula scelerisque venenatis. Donec fermentum ex risus, ac eleifend eros tempor non. Maecenas consectetur purus eu dapibus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vestibulum magna quis mollis commodo. Proin sed ex mollis, rhoncus turpis cursus, laoreet augue. Maecenas non enim diam. Fusce ultricies malesuada orci. Sed dictum cursus fermentum. Nunc vehicula felis non ex congue, eget fringilla lectus fringilla. Nulla aliquam nec arcu et dictum.
Nulla tincidunt purus sapien, in semper lectus viverra sed. In vulputate ante sit amet elit placerat semper. Duis lorem tellus, tempus in leo tincidunt, iaculis commodo risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vitae vestibulum elit. Ut facilisis lectus sed arcu dapibus facilisis id sed sapien. Nullam varius quam at enim vehicula ullamcorper. Proin nec mauris fringilla, mattis purus ac, efficitur felis. Mauris fringilla tellus non ligula ornare mollis. Aliquam pulvinar condimentum consequat. Nam sed libero non dui placerat ultricies.
Quisque pulvinar eros quis lacus dapibus vestibulum. Morbi quis orci ut nisl auctor auctor quis et dui. Fusce ex quam, aliquam at libero scelerisque, tincidunt euismod nulla. Integer vulputate dui sit amet sodales convallis. Duis porttitor nibh risus, a iaculis elit mattis suscipit. In hendrerit nibh erat, et aliquet magna cursus sit amet. Nullam libero leo, semper quis nulla id, pharetra euismod erat. Nulla vel est at lacus dictum pulvinar. Praesent pretium ante dolor, vel facilisis sapien porttitor sed. Nunc in aliquam ante. Proin consequat consectetur urna, eu pellentesque ipsum pharetra ut. Donec ultrices nisl vitae lorem suscipit consectetur. Phasellus vitae lorem et libero dapibus ullamcorper et eu mi.
Sed sagittis, tellus id congue egestas, felis magna tempor risus, nec dictum felis libero eget nunc. Maecenas id eleifend turpis. Nunc placerat odio dui, ut hendrerit tellus suscipit vitae. Morbi nunc lectus, lacinia scelerisque tortor ut, tincidunt fringilla lorem. Nullam dignissim eros eget ipsum rhoncus efficitur. Donec ac quam sodales, tempus risus vitae, aliquet lectus. Aenean non finibus risus. Mauris maximus egestas metus ut malesuada. Morbi egestas tempor tincidunt. Integer sagittis mi vitae elit sodales vestibulum. Curabitur varius dui a massa hendrerit fringilla. Pellentesque imperdiet ipsum in metus ornare sagittis. Nam eget posuere ante, id hendrerit est. Vestibulum vehicula aliquet odio et ornare. Curabitur augue diam, scelerisque vel dapibus eget, facilisis sed turpis. Morbi auctor faucibus lacus sed accumsan.
Integer consectetur dui nibh, varius ullamcorper lectus feugiat id. Vestibulum massa leo, egestas vestibulum sollicitudin in, convallis sit amet justo. Sed mauris justo, faucibus volutpat facilisis ac, volutpat non leo. Vestibulum convallis magna a massa rhoncus accumsan. Quisque et semper dui. Suspendisse euismod erat vel magna fringilla fermentum. Fusce pellentesque egestas tellus, mattis maximus metus rutrum quis. Nulla pharetra vitae turpis ut venenatis. Aliquam maximus urna nunc, sit amet posuere tellus fringilla nec.
Pellentesque viverra orci vel eros rhoncus, in feugiat elit laoreet. Donec sed nulla lorem. Donec sed ipsum eros. Vivamus metus dolor, tristique at ex sit amet, semper condimentum tortor. Vivamus et elementum libero. Phasellus laoreet lectus turpis, ac vestibulum urna finibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer nec rhoncus enim, et congue orci. Nam rutrum non mi id vulputate. Sed sit amet nisi varius, mollis turpis ut, suscipit nunc. Maecenas varius nibh ac volutpat venenatis.
Vivamus vitae scelerisque sem, id elementum ligula. Mauris tristique vitae metus et tincidunt. Integer at porta neque, eget tincidunt nunc. Donec non lobortis lacus. Aenean ac rhoncus mauris, quis congue leo. In vel condimentum risus, eget tincidunt nibh. In sollicitudin lacinia dui, quis tempus lorem faucibus ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Cras eu est vitae metus maximus tempus ut gravida odio.
Etiam ut faucibus arcu. Praesent ac congue urna. Integer suscipit erat at elit vulputate dignissim. Praesent ornare quis nisl eu efficitur. Morbi iaculis turpis nisl, non mattis dolor molestie nec. Nullam in erat quam. Quisque eros nunc, placerat sed enim a, vestibulum ultricies diam. Vestibulum tempus volutpat ullamcorper. Morbi semper purus ultricies diam molestie faucibus. Aliquam ullamcorper viverra purus vel vehicula. Pellentesque fermentum congue libero, laoreet lobortis dui commodo sit amet. Donec vel orci id lorem faucibus convallis nec in ipsum.
Morbi nec ipsum pulvinar, interdum justo eu, vestibulum nisl. Fusce tristique blandit lacus, a lacinia lacus consectetur nec. Sed hendrerit ornare urna tincidunt euismod. Sed venenatis felis ipsum, vitae euismod nisi iaculis eu. Quisque placerat id ipsum ut scelerisque. Quisque dignissim magna dignissim magna aliquam consectetur. Integer efficitur convallis arcu, et mollis magna eleifend id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eleifend luctus fermentum. Cras id nisl nec urna suscipit eleifend. LAST LINE OF TEXT.</div>
<div class="fixed">FIXED CONTENT HERE</div>
Related
I have generated html and css that users will be printing. Each <div class="entry">...</div> should effectively be an index card with content. I added these rules to the <body>
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 120px);
grid-row-gap: 0.5em;
grid-column-gap: 1em;
and the layout looks reasonable except that when printing it will break some of the cards accross pages so I added
#media print {
.entry {
break-inside: avoid;
}
}
This does not work, the print preview still shows the page breaks coming in the middle of the entry divs.
If I remove the grid css then the break-inside: avoid is honored.
Is there any reasonable way to get these two features to work together?
Edit: At Brett's request here is a jsfiddle https://jsfiddle.net/3sxt192h/ with the minimal repro content
If you take that html and css and remove both display:grid and break-inside the print preview shows it breaking inside a div. Adding the break-inside works and it doesn't break mid-div. Add display:grid and you can see that it breaks mid-div again.
I got the same results as you when I tried it.
You could use CSS columns instead of a grid, which seems to work fine in Chrome, but not in Safari. Here is the code I used. I tried it as a snippet, but that changes the printing behaviour :-(
<html>
<head>
<style>
body {
columns: 2;
gap: 1em;
margin: 1em;
}
p {
break-inside: avoid;
padding: 1em;
border: 2px solid black;
background: cyan;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas dui eget eros consectetur, vel lacinia erat tempor. Nunc volutpat, ante quis condimentum faucibus, mi augue posuere libero, luctus luctus leo lacus et ex. Donec non vehicula augue. Mauris a imperdiet est, eu mollis risus. Cras ac libero ac nunc posuere porttitor. Phasellus congue magna quis magna blandit, at feugiat lorem consequat. Aliquam est magna, malesuada non enim ut, vehicula accumsan odio. Donec aliquet, ante at vulputate vehicula, mi justo venenatis turpis, pretium laoreet neque augue quis lacus. Maecenas finibus sed velit vel laoreet. Nunc porttitor sit amet turpis vel efficitur.</p>
<p>Duis mollis volutpat enim, non dignissim libero tincidunt at. Nam mauris nunc, fermentum non suscipit quis, ultricies ac augue. Suspendisse bibendum, massa vel tempus tristique, purus dui tristique ligula, et venenatis sem tortor nec nibh. Aliquam eget justo nec ipsum tincidunt congue non quis velit. Morbi fringilla, erat ut gravida eleifend, mauris urna posuere mauris, id porta turpis felis at nisl. Quisque et mi ac urna viverra efficitur eu sed turpis. Phasellus eget pulvinar lectus. In ac felis id sapien gravida convallis in at lorem.</p>
<p>Donec tincidunt ac tortor sit amet sodales. Nam convallis enim sem, id consectetur nisl ultricies sit amet. Aenean maximus, purus commodo luctus pharetra, lectus lectus lobortis eros, at tristique mi velit vel elit. Pellentesque sed justo non tellus blandit elementum. Phasellus arcu ipsum, posuere id venenatis a, faucibus ut nulla. Sed scelerisque sapien a augue efficitur, ac lobortis nulla sollicitudin. Pellentesque vitae neque vitae turpis aliquet tincidunt. Morbi at ex magna. Vestibulum ornare lacinia rutrum. Curabitur luctus, magna eget consequat rhoncus, purus nunc egestas nulla, at sollicitudin dui lacus et massa. Duis sit amet risus sit amet turpis dignissim lacinia. Suspendisse sagittis cursus dui ut rhoncus. Integer eu ex leo. In sit amet nisi mi. Curabitur nec mollis tortor.</p>
<p>Suspendisse potenti. Sed a hendrerit diam. Praesent tincidunt ut sapien sed porttitor. Fusce consectetur volutpat faucibus. Mauris iaculis efficitur risus, at tempus odio tincidunt at. Praesent volutpat nibh ac elit gravida tempor. Integer laoreet ac nisl ut pretium. Suspendisse et magna ut risus congue tincidunt.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed non diam viverra, vestibulum magna et, varius dui. In vitae eros efficitur, scelerisque est vitae, fermentum ipsum. Duis imperdiet in orci ut porttitor. In ultrices sollicitudin elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus elementum magna ornare, tincidunt elit ac, aliquam elit. Suspendisse dictum fermentum massa, a vehicula nisi finibus nec. In mattis tincidunt tellus, ac consequat leo aliquet at. Phasellus ultricies, lorem sed placerat porttitor, urna augue hendrerit mauris, at accumsan tortor justo eu felis. Cras id lacus aliquam, malesuada erat nec, malesuada libero.</p>
<p>Curabitur at ipsum vitae lacus fermentum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas eu lorem sit amet augue pellentesque pharetra. Praesent semper libero nec efficitur tincidunt. Suspendisse faucibus ultricies porttitor. Duis luctus ut neque tristique condimentum. Aenean ut massa id felis pretium rutrum.</p>
<p>Aenean ultrices, urna a facilisis luctus, diam quam efficitur eros, a posuere leo metus ultrices est. Morbi venenatis dolor ut justo finibus, in semper nisl auctor. Aenean risus ex, viverra vitae neque nec, eleifend laoreet sem. Nam suscipit magna non lectus imperdiet, sit amet venenatis enim molestie. Vestibulum id felis vel dolor hendrerit fringilla nec venenatis odio. Donec dapibus, nunc non pellentesque efficitur, ipsum tortor condimentum tortor, sed laoreet diam ante nec urna. Sed leo massa, eleifend sit amet iaculis at, placerat at elit. Nullam at mollis purus. Quisque faucibus enim hendrerit lacus volutpat, eu dignissim dui venenatis. Nulla accumsan turpis vitae lobortis tincidunt. Morbi maximus arcu sapien, eu tincidunt justo vestibulum eu. Suspendisse luctus tellus dolor, a ornare leo imperdiet sed.</p>
<p>Pellentesque maximus, urna in posuere faucibus, enim sem molestie ante, vel mollis tellus massa vitae odio. Sed elementum at turpis sit amet semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent risus ex, commodo sodales iaculis vitae, cursus sit amet nulla. Proin venenatis neque felis, id vulputate arcu cursus et. Quisque venenatis tellus id nisl convallis, id mollis massa condimentum. Vestibulum aliquet tristique lacus vitae viverra. Integer tincidunt eu diam a molestie. Curabitur eleifend urna sit amet aliquet sodales. Suspendisse et felis et metus lobortis faucibus quis eu eros. Nulla a augue dolor. Vestibulum sit amet leo sagittis, interdum mi eget, aliquam sem. Morbi elementum, tellus eu molestie sagittis, diam ipsum euismod nulla, at aliquet sapien tellus non nisi. Donec malesuada tellus lorem, vitae ullamcorper massa sagittis et. Praesent sodales tincidunt eros, eget tempor enim blandit vitae.</p>
<p>Aliquam gravida sagittis imperdiet. Fusce pellentesque metus vitae velit pharetra, eu tempus risus tempus. Maecenas egestas, turpis id euismod tristique, eros dui tempor elit, eu vulputate ipsum eros quis nibh. Nulla facilisi. Aliquam eget dui condimentum, tempor sapien in, dapibus magna. Nam nec velit mauris. Nunc auctor, eros quis bibendum lacinia, elit diam ornare nulla, ut viverra arcu nibh in odio. Quisque nibh ipsum, dictum ullamcorper purus in, condimentum fermentum risus. Nullam eget mollis magna. Phasellus rhoncus dignissim blandit. Sed massa ex, mollis id placerat in, convallis in velit. Sed molestie volutpat justo sit amet eleifend.</p>
<p>Ut dui est, mollis eget efficitur quis, dapibus et quam. Sed est erat, pulvinar et efficitur et, blandit sit amet purus. Nunc congue vitae enim id interdum. In euismod, felis at faucibus euismod, nunc nulla varius nisl, ut viverra nisl lectus a ipsum. Nunc sollicitudin felis eget viverra accumsan. Mauris id sem elit. Praesent ultrices lorem quis est malesuada, congue imperdiet mi sodales. Curabitur laoreet velit nisl, eget viverra ex posuere ac. Nullam pretium est ac semper fringilla. Integer sed egestas elit. Sed eu pharetra felis. Morbi eget enim sit amet tellus rutrum tincidunt. Nullam in efficitur magna. Suspendisse lobortis nisi at lectus blandit, vitae ullamcorper urna placerat. Proin consequat, risus ut condimentum tristique, ex nibh vehicula dolor, non viverra eros odio eu augue.</p>
<p>Donec lectus sem, feugiat sed augue ac, dapibus bibendum leo. Donec pharetra vehicula fermentum. Donec ac urna lacus. Maecenas felis elit, laoreet ut vulputate ut, pretium in nisi. Integer elementum at enim eu pellentesque. Nunc in ornare erat. Donec sed hendrerit massa. Nunc mattis nunc at ex cursus, vel sodales turpis pulvinar.</p>
<p>Suspendisse euismod condimentum scelerisque. Donec finibus justo at erat molestie, venenatis lobortis justo blandit. Fusce id arcu maximus, scelerisque dui eu, blandit dui. Morbi rhoncus pharetra porta. Duis rhoncus dui nec odio rhoncus mollis. Aenean et metus turpis. Duis ut metus mi. Nam eleifend sapien et nisl vehicula iaculis. Praesent tortor tellus, pulvinar at ipsum ac, euismod porta felis. Nullam iaculis, ante vel pulvinar lobortis, mauris eros auctor nisl, consectetur maximus turpis lectus at odio.</p>
<p>Cras sed ex eget nibh fermentum molestie. In hac habitasse platea dictumst. In ac sollicitudin risus, id auctor elit. Fusce lacus orci, mattis ac neque non, malesuada feugiat mi. Morbi vel fringilla odio. In et nisi feugiat, varius ipsum nec, scelerisque massa. Etiam tincidunt rutrum sagittis. Fusce fringilla tincidunt vehicula. Pellentesque nec sem sed dui ultricies scelerisque. In pulvinar lacus sed eros cursus, imperdiet blandit neque fringilla. Nulla tempor molestie mattis. Donec et faucibus nibh. Duis nec turpis felis. Cras tempus eros quis nisi malesuada, non auctor neque porta.</p>
<p>Nullam est sapien, gravida finibus metus in, feugiat viverra nunc. Aenean at ultrices velit. Aenean tellus sapien, convallis eget metus at, elementum aliquet nunc. Vestibulum vestibulum risus quis arcu malesuada, eu feugiat velit elementum. Cras gravida ut massa ac aliquam. Fusce ornare luctus massa nec vestibulum. Sed vitae blandit ante. Nullam sed metus malesuada, bibendum sem sit amet, ullamcorper justo.</p>
<p>Ut sagittis semper molestie. Suspendisse potenti. Quisque eu commodo nisl. Praesent bibendum fermentum erat, vel mattis lacus aliquam eget. Morbi a laoreet risus, a tincidunt lectus. Integer elementum, justo nec commodo tempor, eros libero pretium diam, id feugiat magna risus at neque. In hac habitasse platea dictumst. Integer non dapibus velit. Maecenas fringilla dolor quis rutrum bibendum. Nam tincidunt hendrerit ullamcorper. Praesent tempus lacus et dui consequat dignissim. Vivamus sit amet scelerisque nulla.</p>
<p>Cras et ipsum ut lorem pellentesque vulputate. Vestibulum molestie, lectus pulvinar suscipit suscipit, sem turpis dignissim magna, et ornare mauris purus bibendum metus. Phasellus in scelerisque augue. Vestibulum iaculis non dui sit amet lobortis. Nunc semper massa sed risus placerat, at ultrices libero varius. Nulla metus nunc, vestibulum at vulputate a, ultrices vitae dui. Praesent luctus consectetur felis, eget lobortis purus tristique vel. Donec tincidunt felis eget augue tincidunt dapibus.</p>
</body>
</html>
My layout is made by Flexbox and I want to have a Sticky Sidebar that works great with content that overflows.
In my attempt, I'm using StickySidebar.js an external library. However, if you check the example because the Sidebar's position is set to fixed the content alignment is being messed up. I've also found out that centering the 2 elements with justify-content is what messes everything up.
window.ResizeSensor = ResizeSensor;
new StickySidebar("#sidebar", {
containerSelector: "#cont",
innerWrapperSelector: ".sidebar-inner",
topSpacing: 0,
bottomSpacing: 20,
left: 0,
right: 0,
maxWidth: "24rem",
resizeSensor: true,
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://abouolia.github.io/sticky-sidebar/js/ResizeSensor.js"></script>
<script src="https://abouolia.github.io/sticky-sidebar/js/sticky-sidebar.js"></script>
<div class="flex justify-center mt-10" id="cont">
<article class="max-w-xl border mb-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac turpis porta, tincidunt nunc in, facilisis sapien. Proin lobortis ac justo nec faucibus. Proin in egestas enim, in feugiat libero. Nulla quis vulputate ligula. Nulla tincidunt interdum augue, id ullamcorper dolor sodales eu. Phasellus sed libero lobortis, ornare neque et, ultricies quam. Praesent accumsan convallis mauris, sit amet convallis nibh feugiat nec.
Ut at faucibus tortor, eu suscipit tortor. Curabitur a molestie dui. Mauris ultricies rhoncus tellus id porta. Maecenas ultrices justo sit amet felis cursus, eget semper dui congue. Aenean maximus blandit nisl id commodo. In eget enim nunc. Cras sed vehicula urna. Integer non sapien cursus, scelerisque nunc non, imperdiet magna. In consectetur turpis sed felis laoreet, non bibendum tellus vulputate. Fusce eu tincidunt massa. Proin non imperdiet elit. Nulla nisi justo, egestas a viverra ut, suscipit non turpis. Vivamus mattis lacus a nisi varius bibendum. Sed non justo euismod, viverra felis vel, luctus nibh.
Pellentesque convallis ipsum nisl. Suspendisse potenti. Duis egestas maximus dui, ac accumsan purus euismod quis. Maecenas elit ante, iaculis vitae egestas a, fringilla sed ex. Suspendisse ac enim commodo, bibendum velit ac, sagittis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse fringilla ante et semper vestibulum.
Maecenas fermentum sagittis pellentesque. Ut semper enim id libero fringilla, ut malesuada velit cursus. Sed malesuada odio sit amet mauris dignissim tincidunt. Sed suscipit neque ut nibh auctor aliquam. Sed mollis lacus quis sollicitudin lacinia. Fusce vestibulum interdum commodo. Suspendisse aliquet venenatis nisl, at tempus dolor lacinia ac.
Quisque odio neque, accumsan eget laoreet a, lacinia nec arcu. Pellentesque faucibus purus gravida lorem pulvinar congue eget non erat. Morbi egestas arcu id justo tempor pharetra. Integer quis pharetra elit, at imperdiet turpis. Maecenas vitae gravida lectus, in ornare leo. Praesent porta non ligula a eleifend. Mauris nibh metus, blandit vitae metus quis, porttitor ultricies nunc. Nunc dictum consequat metus quis condimentum. Cras vitae interdum nisi, hendrerit placerat arcu. Nullam ut scelerisque urna, et pretium nibh. Pellentesque egestas elit egestas nibh tempus aliquam. Aenean vehicula velit eu est hendrerit, vel suscipit urna fermentum. Nam aliquam viverra augue ac pharetra.
Sed ut porta tortor. Nullam scelerisque lobortis neque eget auctor. In hac habitasse platea dictumst. Nulla tempor, nulla nec hendrerit laoreet, dui ex rutrum massa, vel scelerisque arcu sem eget libero. Vestibulum vestibulum odio vitae venenatis posuere. Phasellus pretium cursus ante, scelerisque iaculis nulla feugiat non. Integer varius posuere lorem, eget vehicula sapien commodo ut. Nam faucibus orci a magna blandit, a accumsan mi ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent imperdiet sapien arcu, sit amet vestibulum eros iaculis ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi luctus est a libero imperdiet, ac venenatis est blandit. Etiam pulvinar risus quis sollicitudin vehicula. Suspendisse lacinia neque non leo molestie, vitae volutpat velit laoreet. Vivamus purus nisl, aliquam id ullamcorper vel, egestas quis est. In hac habitasse platea dictumst.
Maecenas eu felis ut sapien mattis suscipit a et nisl. Etiam vel euismod dolor. Integer congue, metus in porttitor imperdiet, leo purus blandit tellus, ut dignissim odio eros sit amet mi. Duis malesuada feugiat felis vitae pharetra. Donec commodo metus sed luctus vestibulum. Ut eleifend eros nec metus venenatis hendrerit. Morbi commodo in magna a rutrum. Quisque sodales turpis eu felis lacinia pretium. Nam eu dolor sed magna gravida consequat. Fusce egestas lacus sit amet mi pharetra interdum. Donec lacinia pellentesque mi sit amet tincidunt. Integer id feugiat quam. Quisque congue a ipsum in sodales. Fusce tincidunt fermentum erat non molestie. Suspendisse sed ultricies augue.
Morbi massa leo, finibus vitae dictum quis, finibus ut purus. Maecenas convallis orci ac ante bibendum, ac tincidunt odio dictum. Cras placerat dapibus tellus, in porta risus. Donec vel tristique nibh. Vivamus euismod condimentum ipsum, sed fermentum nunc convallis id. Nunc laoreet scelerisque ligula, non consectetur orci sagittis vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus varius nulla nec nulla viverra, eget auctor est ullamcorper. Fusce tristique sodales faucibus. Sed volutpat nec ipsum non facilisis. Aliquam eget urna mollis, vehicula mauris sit amet, vehicula sem.
Vivamus sit amet odio sed ipsum pharetra semper. Proin eu sagittis metus. Donec ut tempus velit, sed vehicula quam. Pellentesque ultricies maximus magna efficitur dictum. Nullam pellentesque rhoncus sodales. Sed enim ex, vestibulum in lorem a, scelerisque pretium lectus. Quisque sit amet ipsum ac lacus vehicula porttitor porttitor non nisi. Nullam a placerat lacus, eget varius massa. Phasellus dignissim suscipit sodales.
Praesent fringilla elit quis leo imperdiet, id accumsan ante consequat. Aliquam fringilla tortor eget posuere sollicitudin. Mauris imperdiet facilisis magna, eget ultrices elit vulputate at. Morbi scelerisque, ante in placerat rhoncus, nulla elit auctor odio, eu dapibus lorem nibh sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed placerat quam vitae laoreet lobortis. Vestibulum blandit tellus in vulputate accumsan.
Nullam eget eros augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum eleifend erat, sit amet pharetra nunc malesuada ac. Nunc dapibus lectus quis pharetra facilisis. Duis ut cursus dui. Morbi auctor volutpat laoreet. Sed eu accumsan arcu. Sed fermentum vulputate ante nec interdum. Phasellus in magna lectus. Mauris nec aliquet velit, sed laoreet odio. Vestibulum tincidunt iaculis varius. Ut lobortis nisi leo, a mattis ante vulputate ut. Sed molestie enim sed urna pharetra rutrum.
Fusce mattis maximus purus, nec aliquam dui rutrum placerat. Maecenas vel efficitur nisi, vel venenatis neque. Duis facilisis diam et ultricies condimentum. Duis gravida convallis sagittis. Pellentesque sollicitudin nisi sed ante porttitor tincidunt. Proin euismod metus nisl, ut convallis elit pharetra in. Nulla posuere, odio non tincidunt tincidunt, ex risus finibus leo, vitae semper ligula dui a arcu. Nam ac molestie odio. Cras quis dolor dictum, rhoncus nibh vitae, pretium eros. Nam ante urna, imperdiet non tortor vel, accumsan mollis urna. Fusce maximus pretium est vitae aliquam. Integer eu pharetra justo, sit amet pellentesque nunc. Nullam ultrices risus non felis ornare, vel vulputate augue lobortis. Aliquam urna mi, commodo eu elit ut, suscipit dictum nunc. Aenean viverra lorem vel vehicula malesuada.
Suspendisse nibh ex, facilisis non condimentum nec, ullamcorper scelerisque elit. Fusce at efficitur enim. Nullam sed facilisis diam, ut semper velit. Quisque tincidunt elit ex, nec fringilla enim lacinia sed. Pellentesque elementum et orci eget tempus. Duis posuere, tellus sed volutpat tempus, lacus mauris finibus neque, id suscipit leo est eu magna. Proin feugiat vulputate ante, vitae malesuada nibh. Fusce metus risus, tristique at tincidunt at, pharetra non lorem. Phasellus varius tellus non ullamcorper finibus.
Integer varius, nisl commodo tempor ultrices, orci nunc condimentum sem, volutpat porttitor magna lectus in nisl. Sed vehicula mauris vel ipsum viverra, sed dictum mi pretium. Nam blandit condimentum justo, rhoncus pharetra ligula consequat vitae. Curabitur felis mauris, dignissim eget tristique non, euismod nec sem. Etiam consequat ex a elit ultricies, in ornare odio egestas. Vestibulum vulputate lorem et tortor porta, eget condimentum lacus efficitur. Donec velit felis, dapibus non sollicitudin quis, eleifend id diam. Maecenas massa elit, fermentum a tincidunt quis, dapibus et dui. Vestibulum elit sapien, auctor eu consectetur vel, feugiat vulputate erat. Donec mi risus, sodales nec auctor vitae, placerat quis nulla. Nulla porta interdum blandit. Suspendisse potenti. Morbi sed consectetur velit. Nullam aliquam gravida ante, vitae pellentesque dui.
Fusce sodales finibus erat in lobortis. Aliquam erat volutpat. Maecenas semper diam et lorem ultrices, aliquet euismod purus pulvinar. Nullam porttitor ex eu sapien placerat, non rutrum arcu laoreet. Curabitur ut laoreet est. Nulla semper sem quis commodo congue. Suspendisse pharetra lorem eros, eget semper ex rutrum id.
Etiam sit amet interdum metus. Nam dictum auctor dui id eleifend. Integer faucibus tellus ac nibh commodo, nec efficitur massa luctus. Morbi ante quam, rutrum vel rhoncus venenatis, gravida quis lacus. Cras ac egestas felis, ut iaculis purus. Nunc venenatis ipsum dolor, vitae cursus quam lobortis eget. Proin bibendum rhoncus diam, vel porta nisi. Quisque placerat sodales dignissim.
Proin volutpat tortor ex. Suspendisse efficitur libero purus. Aliquam ornare ex elit, eu feugiat turpis bibendum scelerisque. Sed ut commodo enim. Nullam porta, ex ut luctus tempus, nunc ipsum hendrerit nisl, id lobortis urna turpis id leo. Nunc ultricies nisi tortor, sit amet efficitur dui gravida sit amet. Ut ac feugiat metus. Proin dictum, sapien in rutrum luctus, sem mi viverra sem, eget tincidunt est quam et arcu. Fusce scelerisque sapien sed odio scelerisque, ut dapibus ex commodo. Pellentesque id commodo ante. Donec ultricies aliquet cursus. Curabitur blandit tempor tellus eget auctor. Phasellus tristique aliquet ante eu facilisis.
Maecenas at metus diam. Nam nec congue sem. Donec lorem risus, sollicitudin ac augue sit amet, bibendum bibendum dolor. Duis lacus erat, facilisis quis lobortis vitae, elementum nec velit. Maecenas porta tristique mattis. Vivamus vitae dolor sit amet eros pellentesque sagittis. Aenean massa risus, luctus at nibh id, maximus blandit eros. Mauris vestibulum consectetur neque sit amet placerat. Curabitur fringilla aliquet ornare. Donec auctor odio fermentum dolor vulputate, ut ullamcorper erat eleifend. Sed pellentesque tristique rhoncus.
Aenean commodo convallis mi nec euismod. Donec vestibulum sem sit amet vestibulum lacinia. Phasellus consectetur tellus turpis, id tincidunt nulla tempus sit amet. Suspendisse nec venenatis libero, molestie mattis lectus. Ut ut risus quis nisl hendrerit convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut nunc ultricies, ultrices est id, aliquet magna. Nulla auctor ligula nec metus finibus feugiat. Pellentesque sit amet pulvinar ante, vel semper magna. Aliquam in suscipit nulla, ut molestie turpis.
Sed scelerisque posuere lectus at tincidunt. Praesent at ornare nisi. Pellentesque mollis vehicula ante vel tempus. Sed sapien orci, bibendum ac purus at, faucibus interdum mi. Pellentesque feugiat gravida congue. Pellentesque mollis dictum sem, in posuere odio fringilla a. Duis urna libero, eleifend vitae erat in, pulvinar dignissim diam. Pellentesque luctus, tellus ut malesuada faucibus, ligula urna dictum nunc, non sollicitudin dolor lorem at est. Cras imperdiet, elit scelerisque convallis semper, augue erat posuere eros, ut sodales eros lorem at tortor. Nunc vel blandit massa. In nec sollicitudin nisi. Vivamus vitae ultricies orci, nec ultrices ante. Curabitur eleifend lorem eu nibh volutpat volutpat.
</article>
<article class="flex flex-col max-w-xs" id="sidebar">
<div class="sidebar-inner px-4 border h-full" style="transform: translate3d(0, 0, 0); will-change: position, transform;height: 800px;">
Content for the sidebar...
<div class="footer fixed bottom-0">
botttom
</div>
</div>
</article>
</div>
Is it possible to center everything in the middle while still using Flexbox and a fluid layout (with no container widths set)? Or are there any alternative solutions to this?
With css, you can center everything like this (if that's what you need)
span {
position: absolute;
top: 50%; right: 50%;
transform: translate(50%,-50%);
color: black;
}
<span>text in the center</span>
I created a header with the position set to sticky and top to 0.
But if I scroll down the page, at some point the header stop scrolling with the page.
I think it's an easy fix, but I'm just too dumb for it...
I tried to remove other elements because I thought they were intersecting with the header, but that didn't really work.
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
<header id="navbar">
<div class="navbar"></div>
</header>
I expected the header to be at the top of the viewport the entire time, and not disappearing at some point of scrolling.
Hello Squeez Music and welcome to stackoverflow!
Unfortunately we can't really help you with the problem because you haven't shared enough code. What you have shared should work perfectly fine. To demonstrate I've made a snippet, and you'll see the navbar never disappears.
To get to the bottom of this, it would be a good idea to make a snippet of your own which reproduces the problem you're having. In fact, in the process of doing so you may well figure it out for yourself.
Here's what I'm talking about:
https://stackoverflow.com/help/minimal-reproducible-example
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
<header id="navbar" style="padding: 5px">
<div class="navbar">Check out my nav bar</div>
</header>
<div style="padding: 5px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.
Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.<br><br>
Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.</div>
The header is inside the __body, which is the sticky container. The height of __body is 100% of the body, which is capped at 100vh. Since the content is longer than 100%, the content overflows, and the actual height of the body is larger than 100vh, hence the scroll. Since a sticky item is limited by it's container, the item is scrolled out when it reaches the center (the end of the sticky container).
Example:
body {
height: 100vh;
margin: 0;
}
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
.__body {
height: 100%;
background: red;
}
<div class="__body">
<header id="navbar">
<div class="navbar">Navbar</div>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis quis justo ut bibendum. Praesent sapien elit, pellentesque quis egestas nec, hendrerit a velit. Sed eleifend euismod nibh sit amet dignissim. Vivamus tempus neque enim, eu facilisis ligula eleifend vitae. Pellentesque accumsan vestibulum erat. Sed ut interdum nunc, vitae volutpat tellus. Vestibulum accumsan egestas finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id nisl nulla.
Suspendisse ligula ligula, bibendum sit amet aliquam non, mollis in urna. Suspendisse quis dictum augue. Mauris magna est, luctus id eros vel, interdum lacinia eros. Ut eget nisl at lectus scelerisque vulputate. Etiam viverra maximus orci ut tempus. Pellentesque aliquam lectus ac nisi efficitur fringilla. Sed ut leo eget est interdum pharetra. Sed turpis ex, egestas nec vehicula sit amet, sagittis nec est. Nulla sapien mauris, mattis sit amet dui id, cursus aliquet ligula. Etiam eu orci eget ante faucibus dapibus ac sit amet ligula. Quisque eget porttitor sapien.
Donec elementum urna quam. Morbi vehicula augue et metus eleifend, at aliquet erat sodales. Mauris et tempus orci. Morbi sagittis arcu nisl, eget molestie tortor consequat et. Integer vehicula consequat risus. Vivamus eros ipsum, maximus nec orci blandit, semper commodo dui. Praesent ut dapibus justo, non elementum ligula. Aenean sagittis odio quis malesuada fermentum. Pellentesque vestibulum sem a urna cursus dapibus. Praesent ultricies sapien sed turpis dictum faucibus. Maecenas sollicitudin at justo quis accumsan. Vivamus facilisis purus felis, eu bibendum nunc tincidunt et.
Aliquam purus ex, suscipit ut nibh at, vulputate consectetur est. Sed venenatis, elit vitae consectetur iaculis, sem nunc consequat mauris, nec gravida enim orci et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis interdum aliquam. Duis vehicula orci a pretium semper. Aliquam egestas consequat libero in interdum. Aliquam mi leo, sodales nec turpis bibendum, cursus posuere turpis. Proin vehicula magna eu libero aliquet, interdum mollis orci tincidunt. Etiam feugiat euismod magna, vel lacinia velit condimentum ac. Maecenas diam dui, aliquet non euismod at, suscipit a nulla. Aliquam elit enim, efficitur sit amet neque non, feugiat tristique enim. Ut aliquet maximus lacus, eget euismod quam. Donec vehicula ex at libero sodales, sit amet faucibus velit facilisis.
Morbi risus tortor, sollicitudin at lorem quis, convallis molestie enim. Proin efficitur libero leo, et fermentum velit eleifend in. Etiam vitae suscipit arcu. Nunc eu aliquam quam, a sollicitudin enim. Vivamus porttitor id nisl id pharetra. Sed consequat semper orci, sed iaculis arcu convallis sit amet. Donec vitae elementum nunc, ullamcorper accumsan tellus. Cras eu cursus ante.
Sed efficitur, massa a viverra scelerisque, mi magna tincidunt ipsum, ac laoreet lacus nunc quis mi. Pellentesque ut rutrum felis. Morbi euismod nisi elit, ac tristique arcu semper eget. Suspendisse orci augue, auctor quis dapibus vitae, laoreet in quam. In sagittis, odio sed suscipit mattis, risus sapien faucibus nisl, nec commodo nunc urna sit amet urna. Nulla lobortis, tellus nec auctor fermentum, lacus sapien rhoncus quam, at finibus lacus leo vel nisl. Integer eu aliquet erat. Suspendisse maximus blandit ultrices. Nunc sodales eu erat sit amet tincidunt. Nulla molestie nulla ut lectus luctus, vitae sollicitudin mi feugiat. Proin interdum elit quis lorem rhoncus ultricies. Mauris ac dui sit amet nulla lacinia venenatis in sit amet odio.
</div>
The solution is simple to make __body grow with the content.
body {
margin: 0;
}
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
.__body {
min-height: 100vh;
background: red;
}
<div class="__body">
<header id="navbar">
<div class="navbar">Navbar</div>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis quis justo ut bibendum. Praesent sapien elit, pellentesque quis egestas nec, hendrerit a velit. Sed eleifend euismod nibh sit amet dignissim. Vivamus tempus neque enim, eu facilisis ligula eleifend vitae. Pellentesque accumsan vestibulum erat. Sed ut interdum nunc, vitae volutpat tellus. Vestibulum accumsan egestas finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id nisl nulla.
Suspendisse ligula ligula, bibendum sit amet aliquam non, mollis in urna. Suspendisse quis dictum augue. Mauris magna est, luctus id eros vel, interdum lacinia eros. Ut eget nisl at lectus scelerisque vulputate. Etiam viverra maximus orci ut tempus. Pellentesque aliquam lectus ac nisi efficitur fringilla. Sed ut leo eget est interdum pharetra. Sed turpis ex, egestas nec vehicula sit amet, sagittis nec est. Nulla sapien mauris, mattis sit amet dui id, cursus aliquet ligula. Etiam eu orci eget ante faucibus dapibus ac sit amet ligula. Quisque eget porttitor sapien.
Donec elementum urna quam. Morbi vehicula augue et metus eleifend, at aliquet erat sodales. Mauris et tempus orci. Morbi sagittis arcu nisl, eget molestie tortor consequat et. Integer vehicula consequat risus. Vivamus eros ipsum, maximus nec orci blandit, semper commodo dui. Praesent ut dapibus justo, non elementum ligula. Aenean sagittis odio quis malesuada fermentum. Pellentesque vestibulum sem a urna cursus dapibus. Praesent ultricies sapien sed turpis dictum faucibus. Maecenas sollicitudin at justo quis accumsan. Vivamus facilisis purus felis, eu bibendum nunc tincidunt et.
Aliquam purus ex, suscipit ut nibh at, vulputate consectetur est. Sed venenatis, elit vitae consectetur iaculis, sem nunc consequat mauris, nec gravida enim orci et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis interdum aliquam. Duis vehicula orci a pretium semper. Aliquam egestas consequat libero in interdum. Aliquam mi leo, sodales nec turpis bibendum, cursus posuere turpis. Proin vehicula magna eu libero aliquet, interdum mollis orci tincidunt. Etiam feugiat euismod magna, vel lacinia velit condimentum ac. Maecenas diam dui, aliquet non euismod at, suscipit a nulla. Aliquam elit enim, efficitur sit amet neque non, feugiat tristique enim. Ut aliquet maximus lacus, eget euismod quam. Donec vehicula ex at libero sodales, sit amet faucibus velit facilisis.
Morbi risus tortor, sollicitudin at lorem quis, convallis molestie enim. Proin efficitur libero leo, et fermentum velit eleifend in. Etiam vitae suscipit arcu. Nunc eu aliquam quam, a sollicitudin enim. Vivamus porttitor id nisl id pharetra. Sed consequat semper orci, sed iaculis arcu convallis sit amet. Donec vitae elementum nunc, ullamcorper accumsan tellus. Cras eu cursus ante.
Sed efficitur, massa a viverra scelerisque, mi magna tincidunt ipsum, ac laoreet lacus nunc quis mi. Pellentesque ut rutrum felis. Morbi euismod nisi elit, ac tristique arcu semper eget. Suspendisse orci augue, auctor quis dapibus vitae, laoreet in quam. In sagittis, odio sed suscipit mattis, risus sapien faucibus nisl, nec commodo nunc urna sit amet urna. Nulla lobortis, tellus nec auctor fermentum, lacus sapien rhoncus quam, at finibus lacus leo vel nisl. Integer eu aliquet erat. Suspendisse maximus blandit ultrices. Nunc sodales eu erat sit amet tincidunt. Nulla molestie nulla ut lectus luctus, vitae sollicitudin mi feugiat. Proin interdum elit quis lorem rhoncus ultricies. Mauris ac dui sit amet nulla lacinia venenatis in sit amet odio.
</div>
I think your problem comes from your grid-template-rows in your __body selector. You have 170% here, your header sticks inside its parent only.
Try with:
.__body {
display: grid;
grid-template-rows: 5.88% 17.64% 23.53% 29.11% 11.76% 11.76%;
You may want to try another unit than % to have something more fluid.
[edit] That's basically what Ori Drori just said :)
I found a way to make it work by giving the header the fixed position instead of sticky and giving it a width and height.
I have a fixed header & a div inside the container. The div which is inside the container overlaps the header. I tried position: relative but it is not giving me the result as expected!
#syllabus_container {
background:#ADC;
left:0;
position:relative;
width:100%;
top:0;
}
Here is the live effect of my code!
pleas use below css, use z index to show it on top, you can check on below link
https://www.w3schools.com/code/tryit.asp?filename=FLOPWZTB16T2
#header_container {
background: #ABC;
height: 75px;
left: 0;
position: fixed;
width: 100%;
top: 0;
z-index: 99999999999999;
}
Check the code below.Hope it helps
.header{
position:fixed;
width:100%;
top:0;
left:0;
height:70px;
background:pink;
text-align:center;
color:#fff;
font-size:20px;
z-index:9;
}
.content{
margin-top:72px;
}
<div>
<div class="header">The header</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum lectus, rhoncus pretium lectus ac, laoreet dignissim nibh. Proin eleifend malesuada dapibus. Nunc quis arcu id nibh posuere sodales eu ac orci. Morbi bibendum efficitur odio vitae venenatis. In nec viverra tortor. Suspendisse non nibh ut sem commodo faucibus ut ut leo. Cras tincidunt ullamcorper nibh, ac bibendum leo volutpat ut.
Sed id ultrices ex. Aenean id laoreet mi. Aenean viverra sit amet risus sed tristique. Phasellus varius massa eu vestibulum euismod. Etiam vel velit ut purus ornare accumsan. Maecenas vulputate eu tellus a egestas. Vivamus maximus imperdiet risus, non posuere ante lobortis sed. In faucibus aliquam odio. Maecenas et mollis purus, at luctus lectus. In eget nibh quam. Duis in tempor nisl, ac imperdiet erat. Nam condimentum consectetur sapien. Nullam non urna vitae est convallis rhoncus vitae nec enim.
Phasellus ullamcorper egestas metus, in imperdiet magna blandit id. Fusce eu magna in ante aliquam congue. Pellentesque euismod turpis eu lorem rhoncus, sed condimentum elit cursus. Suspendisse at feugiat erat. Duis malesuada ligula sed felis rutrum mattis. Donec ac magna dictum, vehicula tellus ut, tristique ligula. Quisque quis congue sapien, eu laoreet tortor. Pellentesque commodo metus diam, non egestas quam dignissim nec. Curabitur non velit purus. Pellentesque mauris velit, imperdiet vel imperdiet quis, viverra ut leo. Ut eget malesuada libero. Sed tristique metus commodo fermentum tristique. Cras accumsan massa vitae dolor scelerisque, eu tincidunt mauris venenatis. Ut in purus vitae risus aliquam mattis. Cras cursus maximus elit, tempor pretium urna congue in.
Nulla facilisi. Sed feugiat elementum enim, et posuere dolor tempus pharetra. Nulla a orci eget lorem tincidunt aliquam id id nulla. Morbi facilisis eget elit in volutpat. Aliquam sed luctus enim, id aliquam nunc. Pellentesque eu elit dui. Proin ornare tempor eros, vitae faucibus sapien placerat a. Mauris volutpat feugiat est a finibus. Phasellus in mattis diam. Mauris vitae dignissim dui. Proin tincidunt arcu sit amet pretium tristique. Mauris ullamcorper at neque eget euismod. Nam massa massa, mattis quis risus vitae, elementum lobortis justo.
Nam eu est non dui molestie fringilla. Aliquam ullamcorper elit ligula, quis vestibulum lectus auctor vitae. Nulla a blandit sem. Nulla mauris nisl, molestie sed dolor nec, feugiat imperdiet orci. Ut commodo at metus in gravida. Vivamus sed sapien auctor, molestie est in, ullamcorper diam. Mauris molestie quam non venenatis laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a tempus erat. Maecenas dui orci, malesuada a vulputate ac, egestas ac ante. In dolor quam, ornare eget tincidunt sit amet, mattis at diam. Etiam nec malesuada magna.
Nam vitae risus mi. Maecenas faucibus purus sed arcu posuere, ut eleifend risus facilisis. Integer suscipit, tortor eu malesuada porttitor, tortor sem laoreet enim, vitae tincidunt velit nisl sed turpis. Praesent magna velit, auctor vel mattis gravida, fermentum ut turpis. Vivamus nisl dui, ullamcorper nec convallis vitae, suscipit ut mi. Curabitur condimentum in leo congue consectetur. Praesent sit amet massa hendrerit, pretium lectus quis, egestas augue. Mauris ac pretium purus, eget fermentum nulla. Vivamus sed est massa. Praesent vitae nisl sed nisl porta vestibulum. Donec maximus facilisis urna, nec semper urna suscipit quis. In nisi turpis, suscipit eu elit vitae, consectetur lobortis mi.
Proin ut orci diam. Ut venenatis eget leo nec mollis. In ut lorem vel dolor mollis feugiat. Pellentesque quam risus, aliquet vitae ultricies id, sodales eu risus. Vestibulum sodales non sapien a cursus. Aenean sapien nunc, aliquet in metus quis, viverra mollis nisl. Pellentesque eu hendrerit lacus, id consequat enim. Nulla lectus erat, congue non turpis in, ornare dapibus ex. In in molestie mi. Nunc sagittis, ante nec finibus aliquam, sem est molestie ipsum, at interdum dolor neque nec dolor. Cras et lectus accumsan, volutpat felis sed, vehicula enim.
Sed vitae lacinia neque. In eleifend ex vestibulum sem gravida, vitae pellentesque mi laoreet. Nulla placerat mauris at viverra pulvinar. Nunc ut ante ante. Aliquam in vehicula diam. Sed mauris neque, porta vitae sagittis vel, dapibus sed ligula. Mauris magna orci, maximus ac dictum eget, auctor vitae nisl. Vestibulum hendrerit sem vitae mi cursus, quis consectetur est hendrerit. Sed id metus fringilla, mattis est vel, cursus ligula. Sed non auctor lorem, at facilisis ipsum. Mauris venenatis accumsan lacus, et ornare purus cursus at. Suspendisse lacinia porttitor tincidunt. Sed vitae diam leo. Pellentesque eu malesuada libero. Cras varius ultrices augue, at ullamcorper nunc tristique non.
Curabitur et molestie justo. Pellentesque et neque quis risus efficitur porttitor at eget odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elit libero, dignissim quis rhoncus sed, aliquam non ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis erat tempus pretium tempus. Ut vehicula ipsum leo, vehicula dignissim dui dignissim et. Vivamus et lacinia magna.
Integer a diam purus. Maecenas condimentum quam convallis tincidunt vestibulum. Proin vestibulum ut leo elementum hendrerit. Sed diam mi, vehicula sed auctor sit amet, fringilla vitae augue. Curabitur magna eros, maximus et erat et, sodales accumsan tellus. Sed sagittis felis facilisis dolor euismod, ut dictum nulla convallis. Sed massa nulla, sodales malesuada pellentesque sagittis, vehicula id ligula. Nunc bibendum, odio sit amet suscipit porttitor, dui sapien consectetur libero, in ultrices justo dolor ac nulla. Cras gravida orci nec leo aliquam maximus. Vestibulum quis lobortis sapien. Integer pharetra elit enim, a hendrerit leo porta a. Phasellus efficitur enim vitae laoreet posuere. Nullam eu quam pellentesque, commodo enim a, venenatis turpis. Donec pulvinar eleifend urna, in tincidunt lorem imperdiet ut.
Nam id orci sit amet ante aliquam tincidunt ut vel nisi. Fusce ornare nibh lacus, non sagittis arcu lobortis eu. Nulla purus dui, viverra in sodales vitae, commodo at odio. Aliquam dignissim lacus quis velit fringilla ultrices. Aliquam nisi lectus, consequat quis risus et, pulvinar malesuada nisl. Cras lobortis magna id volutpat imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget porta lacus, quis condimentum turpis.
In vitae porttitor purus. Aliquam ullamcorper metus eget urna maximus, non viverra mi tempor. Proin elit nisi, cursus a blandit vitae, dignissim in lorem. Vestibulum sollicitudin tellus placerat porttitor molestie. In hac habitasse platea dictumst. Nulla venenatis tortor sit amet ex venenatis, in consequat quam dictum. Donec pellentesque nunc et ipsum fringilla, ac lobortis risus sagittis.
Morbi pretium, nibh eu fermentum porta, nunc diam sagittis urna, sed rhoncus purus mi at magna. Nam pulvinar, justo a efficitur ultrices, arcu libero finibus massa, nec blandit nisi ipsum sed neque. Integer venenatis purus velit, nec malesuada ipsum iaculis nec. Cras consequat orci orci, ac aliquam dui laoreet sed. Fusce feugiat ligula in dapibus rhoncus. In sed suscipit arcu. Nam varius varius orci, id dictum urna pellentesque finibus. Phasellus non ex vitae diam tristique egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum finibus quam nec ligula iaculis, vitae maximus nulla aliquet. Nullam faucibus lacinia sollicitudin. Ut hendrerit cursus velit, et vestibulum elit sagittis nec.
Morbi tempor commodo eros ac posuere. Nunc rhoncus tempus neque, eget laoreet mi aliquam at. Maecenas eget metus finibus, fringilla enim pellentesque, rutrum ante. Donec nec mollis sem. Maecenas in ante malesuada, molestie felis eu, euismod neque. Nam dui magna, gravida non orci vel, suscipit pharetra nulla. Pellentesque in sem porta, auctor arcu ut, tincidunt diam. Aenean commodo massa ut lectus mollis viverra. Praesent ultrices ac lorem in aliquet. Aenean interdum, nisl quis hendrerit venenatis, arcu est placerat felis, a mattis ligula justo ut ligula. Sed dictum felis tellus, id vulputate mauris pellentesque sit amet. Vivamus at turpis iaculis, dictum eros at, pellentesque magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt sapien in tincidunt rutrum. Maecenas tincidunt lacus at est scelerisque, vel laoreet urna viverra.
Etiam aliquam, elit nec dictum auctor, purus libero sollicitudin erat, nec malesuada mi ex at massa. Cras ac lorem sed nibh dignissim lobortis. Quisque auctor consectetur enim sit amet ultricies. Nullam nec mauris nibh. Morbi at venenatis neque. Maecenas velit nisi, sodales non lorem ac, pellentesque sodales justo. Morbi sed placerat diam, ut tristique arcu. Aenean sapien risus, ultrices quis porttitor commodo, elementum vestibulum lacus. Phasellus eleifend in orci in feugiat. Morbi iaculis, ex sed sollicitudin eleifend, neque tellus sodales metus, a elementum dui ipsum id massa. Suspendisse cursus ut quam id consectetur. Suspendisse potenti. In eu libero est. In vulputate dictum lacus, quis sodales nulla iaculis quis. Nullam sodales mollis tortor, at vulputate augue accumsan sed. Donec sagittis massa enim, eget laoreet arcu tristique eu.
</div>
</div>
I have a fairly simple layout (bootstrap v4 classes included):
<div class="d-flex flex-column" style="width: 100%; height: 100vh;">
<div>foo</div>
<div style="flex: 1"></div>
<div>bar</div>
</div>
Which leaves me with:
------------------------------------
| foo |
------------------------------------
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
------------------------------------
| bar |
------------------------------------
A header and a footer that take as much height as their content has, and a body that expands itself in order to fill the empty space available in the browser.
The problem comes when there is more content than the total height of the browser - (header height + footer height), in which case the body keeps expanding itself.
Is there a way I can limit the body height to be as much as the remaining space? Remaining space == Browser height - (header height + footer height).
Tips:
I don't know the height of the header or the footer, I will downvote solutions with hardcoded values. Restrain from answering if you don't understand what this means.
I don't want Javascript. This must be only CSS. I will downvote answers that contain javascript.
To prevent the content from exceeding the maximum available space left by the header and footer use the min-height property in your content class.
By default, flex items won’t shrink below their minimum content size
(the length of the longest word or fixed-size element). To change
this, set the min-width or min-height property.
body {
margin: 0;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: dodgerblue;
}
.container {
flex: 1;
min-height: 0;
overflow-y: scroll; /*overflow: hidden;*/
background-color: turquoise;
}
footer {
background-color: violet;
}
<main>
<header>
Header
</header>
<div class="container">
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate mi odio, ac finibus tortor tempus a. Quisque eu ex ac nibh eleifend fringilla. Nunc accumsan arcu nec pharetra congue. In iaculis ante eu velit rutrum lobortis. Proin et
congue turpis. Quisque gravida nisl et sem lobortis, nec ultrices urna pretium. Nunc a viverra urna. Nam a cursus ligula. Aliquam justo enim, aliquam quis nulla ut, ornare sollicitudin ex. Sed vestibulum sodales semper. Duis vestibulum laoreet nibh
non condimentum. Maecenas sit amet scelerisque libero. Phasellus consequat quam id elit hendrerit, sit amet auctor augue finibus. Proin eu porta dolor. Suspendisse neque diam, iaculis eu felis sit amet, elementum scelerisque velit. Nunc mollis, magna
quis dignissim bibendum, magna ligula tristique diam, vitae bibendum lorem est in nisi. Nulla euismod auctor turpis, laoreet mattis neque bibendum et. Morbi condimentum nisl sit amet velit dignissim ultricies. Vestibulum commodo felis id nisl placerat
pharetra. Morbi ac lectus non metus porttitor mollis scelerisque vitae felis. Suspendisse luctus sollicitudin metus nec aliquet. Vestibulum in convallis leo. Nunc vel consequat libero. Sed dapibus ligula nisl, quis sagittis quam mollis sit amet. Duis
et viverra lorem. Nunc luctus risus ut justo venenatis consectetur. Sed et porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec sapien arcu. Suspendisse placerat cursus erat, pretium
finibus purus. Nulla at risus nulla. Mauris at lectus id diam rutrum aliquam eget et ante. Maecenas rutrum orci et ornare iaculis. Suspendisse potenti. Morbi est felis, bibendum at ante sed, rhoncus varius dui. Curabitur ac neque vitae lorem feugiat
tincidunt sed vitae quam. Aliquam ornare orci eu magna sollicitudin, quis fermentum diam condimentum. Ut consequat pulvinar risus. Vivamus vestibulum massa ut eros euismod sagittis. Fusce volutpat nisl aliquet, cursus dolor vestibulum, blandit turpis.
Nunc elementum tempus diam, quis ornare lectus pharetra ut. Sed sit amet efficitur nisl, a dictum metus. Suspendisse in purus ac elit tristique pulvinar at id mi. Donec mollis sem ut risus scelerisque sagittis. Maecenas gravida tristique odio id feugiat.
Etiam maximus nunc non erat facilisis luctus. Vivamus ut magna facilisis, iaculis massa quis, luctus nulla. Cras mattis faucibus rutrum. Curabitur quis auctor lacus. Nam tempus sapien vitae finibus dignissim. Curabitur sagittis, magna ac mattis dictum,
lacus nisi pretium purus, et maximus sem eros non turpis. Donec vel tortor erat. Maecenas finibus velit hendrerit lorem vestibulum imperdiet. Integer sed sem est. Fusce iaculis justo at ipsum cursus sodales. Integer vel odio ut enim feugiat euismod
id ac ex. Donec vel ante scelerisque, varius elit eget, finibus lectus. Quisque mattis, eros quis congue posuere, lorem quam scelerisque dolor, sed sagittis lacus massa eu ligula. Fusce viverra vitae mauris vitae euismod. Etiam sapien odio, fringilla
sit amet ultricies ut, vulputate sed leo. Vivamus maximus quam a risus interdum, ut venenatis ipsum tincidunt. Donec ultrices nisi id euismod egestas. Proin nec magna euismod, egestas nibh et, accumsan dolor. Integer sit amet libero eros. Cras augue
risus, pretium et aliquam vitae, malesuada id tortor. Nam fermentum placerat imperdiet. Etiam aliquam in tortor in dictum. Integer vel orci vitae dui dignissim ultricies vitae eget dui. Nullam vitae urna nec urna finibus cursus. Vestibulum scelerisque,
erat in auctor accumsan, ipsum elit bibendum sem, nec viverra nisi risus at urna. In sit amet nulla scelerisque, volutpat mi sed, pharetra ex. Nullam in felis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Nulla ut convallis arcu. Maecenas elementum nulla elit, id eleifend urna convallis id. In a pellentesque elit, nec sollicitudin orci. Vestibulum lacus odio, pulvinar nec placerat eu, porttitor sit amet ex. Integer sed pharetra turpis. Vestibulum
accumsan nulla et mi finibus, auctor congue ex lobortis. Cras fringilla purus velit. Vivamus sit amet semper tellus, non vehicula erat. Nam a finibus massa, at tempus felis. Integer at semper purus, eget laoreet neque. Etiam odio leo, laoreet at lacinia
ut, faucibus at magna. Mauris vestibulum nunc in ipsum feugiat pulvinar. Nulla lacinia diam eros, vel cursus ante ullamcorper sit amet. Pellentesque dictum, urna ac tincidunt ullamcorper, sem ligula faucibus tortor, eu lobortis risus est in nulla.
Phasellus magna sem, dignissim vitae justo vitae, dignissim ultrices diam. Mauris in neque vitae nisl elementum ornare ut tempor justo. Vestibulum vitae leo felis. Praesent porttitor sem et aliquam dignissim. Aenean eu quam id nulla hendrerit laoreet
sed dapibus purus. Praesent maximus rhoncus turpis, at egestas turpis. Vivamus turpis leo, porttitor id accumsan at, sagittis vel ante. Integer ultrices euismod euismod. Fusce bibendum lorem sit amet mi accumsan finibus. Morbi auctor quam id ex suscipit
maximus. Sed vel sem sollicitudin turpis rutrum gravida et eget mi. Nulla ac justo a neque tempus lobortis eu in mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus pulvinar aliquam nulla, sit amet pellentesque dolor. Proin
sed mollis ante. Nullam lectus diam, placerat non laoreet sit amet, imperdiet sed augue. Ut mollis mattis sem, ac suscipit mi eleifend nec. Phasellus convallis massa ut arcu viverra, vitae auctor lacus convallis. Etiam vitae blandit nunc. Donec non
turpis nec purus blandit dictum. Sed bibendum sollicitudin massa non egestas. In sed neque sit amet dolor egestas sodales convallis in nunc. Sed iaculis libero nec sem porttitor, accumsan bibendum magna eleifend. Mauris interdum quam nunc, sit amet
cursus orci consequat et. Phasellus nec maximus dolor. Sed vestibulum mattis iaculis. Praesent sodales sed nunc ac congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec vulputate mi odio, ac finibus tortor tempus a. Quisque eu ex ac nibh eleifend fringilla. Nunc accumsan arcu nec pharetra congue. In iaculis ante eu velit rutrum lobortis. Proin et congue turpis. Quisque gravida nisl et sem lobortis,
nec ultrices urna pretium. Nunc a viverra urna. Nam a cursus ligula. Aliquam justo enim, aliquam quis nulla ut, ornare sollicitudin ex. Sed vestibulum sodales semper. Duis vestibulum laoreet nibh non condimentum. Maecenas sit amet scelerisque libero.
Phasellus consequat quam id elit hendrerit, sit amet auctor augue finibus. Proin eu porta dolor. Suspendisse neque diam, iaculis eu felis sit amet, elementum scelerisque velit. Nunc mollis, magna quis dignissim bibendum, magna ligula tristique diam,
vitae bibendum lorem est in nisi. Nulla euismod auctor turpis, laoreet mattis neque bibendum et. Morbi condimentum nisl sit amet velit dignissim ultricies. Vestibulum commodo felis id nisl placerat pharetra. Morbi ac lectus non metus porttitor mollis
scelerisque vitae felis. Suspendisse luctus sollicitudin metus nec aliquet. Vestibulum in convallis leo. Nunc vel consequat libero. Sed dapibus ligula nisl, quis sagittis quam mollis sit amet. Duis et viverra lorem. Nunc luctus risus ut justo venenatis
consectetur. Sed et porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec sapien arcu. Suspendisse placerat cursus erat, pretium finibus purus. Nulla at risus nulla. Mauris at lectus
id diam rutrum aliquam eget et ante. Maecenas rutrum orci et ornare iaculis. Suspendisse potenti. Morbi est felis, bibendum at ante sed, rhoncus varius dui. Curabitur ac neque vitae lorem feugiat tincidunt sed vitae quam. Aliquam ornare orci eu magna
sollicitudin, quis fermentum diam condimentum. Ut consequat pulvinar risus. Vivamus vestibulum massa ut eros euismod sagittis. Fusce volutpat nisl aliquet, cursus dolor vestibulum, blandit turpis. Nunc elementum tempus diam, quis ornare lectus pharetra
ut. Sed sit amet efficitur nisl, a dictum metus. Suspendisse in purus ac elit tristique pulvinar at id mi. Donec mollis sem ut risus scelerisque sagittis. Maecenas gravida tristique odio id feugiat. Etiam maximus nunc non erat facilisis luctus. Vivamus
ut magna facilisis, iaculis massa quis, luctus nulla. Cras mattis faucibus rutrum. Curabitur quis auctor lacus. Nam tempus sapien vitae finibus dignissim. Curabitur sagittis, magna ac mattis dictum, lacus nisi pretium purus, et maximus sem eros non
turpis. Donec vel tortor erat. Maecenas finibus velit hendrerit lorem vestibulum imperdiet. Integer sed sem est. Fusce iaculis justo at ipsum cursus sodales. Integer vel odio ut enim feugiat euismod id ac ex. Donec vel ante scelerisque, varius elit
eget, finibus lectus. Quisque mattis, eros quis congue posuere, lorem quam scelerisque dolor, sed sagittis lacus massa eu ligula. Fusce viverra vitae mauris vitae euismod. Etiam sapien odio, fringilla sit amet ultricies ut, vulputate sed leo. Vivamus
maximus quam a risus interdum, ut venenatis ipsum tincidunt. Donec ultrices nisi id euismod egestas. Proin nec magna euismod, egestas nibh et, accumsan dolor. Integer sit amet libero eros. Cras augue risus, pretium et aliquam vitae, malesuada id tortor.
Nam fermentum placerat imperdiet. Etiam aliquam in tortor in dictum. Integer vel orci vitae dui dignissim ultricies vitae eget dui. Nullam vitae urna nec urna finibus cursus. Vestibulum scelerisque, erat in auctor accumsan, ipsum elit bibendum sem,
nec viverra nisi risus at urna. In sit amet nulla scelerisque, volutpat mi sed, pharetra ex. Nullam in felis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ut convallis arcu. Maecenas elementum nulla
elit, id eleifend urna convallis id. In a pellentesque elit, nec sollicitudin orci. Vestibulum lacus odio, pulvinar nec placerat eu, porttitor sit amet ex. Integer sed pharetra turpis. Vestibulum accumsan nulla et mi finibus, auctor congue ex lobortis.
Cras fringilla purus velit. Vivamus sit amet semper tellus, non vehicula erat. Nam a finibus massa, at tempus felis. Integer at semper purus, eget laoreet neque. Etiam odio leo, laoreet at lacinia ut, faucibus at magna. Mauris vestibulum nunc in ipsum
feugiat pulvinar. Nulla lacinia diam eros, vel cursus ante ullamcorper sit amet. Pellentesque dictum, urna ac tincidunt ullamcorper, sem ligula faucibus tortor, eu lobortis risus est in nulla. Phasellus magna sem, dignissim vitae justo vitae, dignissim
ultrices diam. Mauris in neque vitae nisl elementum ornare ut tempor justo. Vestibulum vitae leo felis. Praesent porttitor sem et aliquam dignissim. Aenean eu quam id nulla hendrerit laoreet sed dapibus purus. Praesent maximus rhoncus turpis, at egestas
turpis. Vivamus turpis leo, porttitor id accumsan at, sagittis vel ante. Integer ultrices euismod euismod. Fusce bibendum lorem sit amet mi accumsan finibus. Morbi auctor quam id ex suscipit maximus. Sed vel sem sollicitudin turpis rutrum gravida
et eget mi. Nulla ac justo a neque tempus lobortis eu in mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus pulvinar aliquam nulla, sit amet pellentesque dolor. Proin sed mollis ante. Nullam lectus diam, placerat non laoreet
sit amet, imperdiet sed augue. Ut mollis mattis sem, ac suscipit mi eleifend nec. Phasellus convallis massa ut arcu viverra, vitae auctor lacus convallis. Etiam vitae blandit nunc. Donec non turpis nec purus blandit dictum. Sed bibendum sollicitudin
massa non egestas. In sed neque sit amet dolor egestas sodales convallis in nunc. Sed iaculis libero nec sem porttitor, accumsan bibendum magna eleifend. Mauris interdum quam nunc, sit amet cursus orci consequat et. Phasellus nec maximus dolor. Sed
vestibulum mattis iaculis. Praesent sodales sed nunc ac congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<footer>
Footer
</footer>
</main>