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
Related
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>
This question already has answers here:
Make div stay at bottom of page's content all the time even when there are scrollbars
(12 answers)
Closed 1 year ago.
Here is my code, i want my footer to be static at the bottom of my html page, how can i fixed it ?
<footer class="footer">
<div>
</div>
<div class="footer_container">
<%= link_to "About Us", '#' %>
<%= link_to "Contact Us", '#' %>
</div>
</footer>
just write this css:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%; // <- this is optional
}
here is the reference
Add .footer Class
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
<h2>Footer Example</h2>
<div class="footer">
<div>
</div>
<div class="footer_container">
<ul class="navigation">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
/* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: #6cf;
}
<div id="container">
<div id="header">This is header</div>
<div id="body">
<h1>This is body DUMMY TEXT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At varius vel pharetra vel turpis nunc. Accumsan sit amet nulla facilisi. Molestie at elementum eu facilisis sed odio. Vitae
sapien pellentesque habitant morbi tristique senectus et. Lobortis scelerisque fermentum dui faucibus. Nunc scelerisque viverra mauris in aliquam sem. Congue mauris rhoncus aenean vel elit scelerisque mauris. Laoreet id donec ultrices tincidunt
arcu non sodales neque sodales. Velit aliquet sagittis id consectetur purus ut faucibus. Ipsum nunc aliquet bibendum enim facilisis gravida. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor vitae purus faucibus ornare suspendisse sed
nisi. Faucibus pulvinar elementum integer enim neque volutpat. Venenatis cras sed felis eget velit. Velit egestas dui id ornare. Tempus iaculis urna id volutpat. In hac habitasse platea dictumst. Viverra maecenas accumsan lacus vel facilisis volutpat.
Enim praesent elementum facilisis leo. Ut tristique et egestas quis. Id interdum velit laoreet id donec ultrices tincidunt arcu. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Sit amet consectetur adipiscing elit duis tristique
sollicitudin nibh sit. Nec dui nunc mattis enim ut tellus. Adipiscing vitae proin sagittis nisl rhoncus. Bibendum est ultricies integer quis auctor. Egestas tellus rutrum tellus pellentesque eu tincidunt. Sagittis id consectetur purus ut faucibus
pulvinar elementum. Feugiat pretium nibh ipsum consequat nisl vel. Integer malesuada nunc vel risus. Tortor id aliquet lectus proin nibh nisl. Ante metus dictum at tempor commodo ullamcorper a. Enim blandit volutpat maecenas volutpat blandit aliquam
etiam erat. Morbi blandit cursus risus at ultrices mi. Netus et malesuada fames ac turpis egestas. Sed augue lacus viverra vitae congue. Cursus risus at ultrices mi. Libero enim sed faucibus turpis in eu mi bibendum neque. Vulputate dignissim suspendisse
in est ante in nibh mauris cursus. Ultricies mi quis hendrerit dolor magna eget. Cras adipiscing enim eu turpis egestas pretium aenean pharetra. Mattis ullamcorper velit sed ullamcorper morbi. Vel risus commodo viverra maecenas accumsan lacus vel.
Posuere urna nec tincidunt praesent semper feugiat nibh sed. Hendrerit gravida rutrum quisque non tellus orci. In nulla posuere sollicitudin aliquam ultrices sagittis orci. Eget mauris pharetra et ultrices neque ornare. Commodo ullamcorper a lacus
vestibulum. Ligula ullamcorper malesuada proin libero nunc consequat. Augue eget arcu dictum varius duis at consectetur lorem. Felis imperdiet proin fermentum leo vel orci porta. Et netus et malesuada fames ac. Tincidunt augue interdum velit euismod
in. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Semper viverra nam libero justo laoreet sit amet cursus sit. Quis risus sed vulputate odio. Non curabitur gravida arcu
ac tortor. Pellentesque eu tincidunt tortor aliquam nulla. Dui sapien eget mi proin sed libero enim sed faucibus. Adipiscing elit duis tristique sollicitudin. Enim lobortis scelerisque fermentum dui faucibus. Ac placerat vestibulum lectus mauris
ultrices eros in cursus turpis. Congue eu consequat ac felis donec. Diam maecenas sed enim ut sem viverra. Id cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Risus at
ultrices mi tempus imperdiet nulla. Vel eros donec ac odio tempor orci dapibus ultrices in. Nisl condimentum id venenatis a condimentum vitae. Amet est placerat in egestas erat. Aliquet nec ullamcorper sit amet. Odio facilisis mauris sit amet massa.
Velit aliquet sagittis id consectetur. Leo integer malesuada nunc vel. In ornare quam viverra orci. Tristique senectus et netus et malesuada. Sit amet purus gravida quis blandit turpis cursus in. Bibendum arcu vitae elementum curabitur vitae. Ultrices
gravida dictum fusce ut. Tellus rutrum tellus pellentesque eu. Sit amet luctus venenatis lectus. Eget felis eget nunc lobortis mattis. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Blandit turpis cursus in hac habitasse platea. Adipiscing
at in tellus integer feugiat scelerisque. Ut eu sem integer vitae justo. Id velit ut tortor pretium viverra suspendisse potenti. Nunc pulvinar sapien et ligula ullamcorper malesuada. Nulla aliquet enim tortor at. Suspendisse interdum consectetur
libero id faucibus. Vitae et leo duis ut diam quam nulla porttitor massa. Posuere ac ut consequat semper viverra nam libero. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Ultricies leo integer malesuada nunc vel risus commodo viverra.
Mi bibendum neque egestas congue quisque egestas diam. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Nec feugiat in fermentum posuere urna nec. Cras ornare arcu dui vivamus arcu. Tincidunt vitae semper quis lectus nulla. Faucibus
in ornare quam viverra orci sagittis eu volutpat. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Molestie at elementum eu facilisis sed odio morbi quis commodo. In aliquam sem fringilla ut morbi tincidunt augue. Quam pellentesque
nec nam aliquam sem et tortor consequat. In massa tempor nec feugiat nisl. Suspendisse sed nisi lacus sed viverra tellus in hac. Pretium lectus quam id leo in vitae. Maecenas sed enim ut sem viverra aliquet eget. Nulla malesuada pellentesque elit
eget gravida cum sociis. Consectetur a erat nam at lectus. In fermentum et sollicitudin ac orci. Purus ut faucibus pulvinar elementum integer enim. Ut diam quam nulla porttitor massa id neque. Vitae semper quis lectus nulla at. Amet facilisis magna
etiam tempor orci eu lobortis elementum nibh. Etiam sit amet nisl purus. Lectus mauris ultrices eros in cursus turpis massa. Vel facilisis volutpat est velit egestas dui id ornare arcu. Feugiat vivamus at augue eget arcu dictum varius. Sem et tortor
consequat id porta nibh venenatis cras sed. Euismod elementum nisi quis eleifend. Etiam non quam lacus suspendisse faucibus. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Suspendisse interdum consectetur libero id faucibus
nisl tincidunt eget. Auctor augue mauris augue neque gravida in. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Ullamcorper sit amet risus nullam eget. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus.
Nec ultrices dui sapien eget mi proin sed libero enim. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Vel risus commodo viverra maecenas accumsan. Donec pretium vulputate sapien nec sagittis aliquam malesuada.
Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Nunc sed blandit libero volutpat sed cras. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Augue ut lectus arcu bibendum. Orci porta non pulvinar neque laoreet suspendisse.
Gravida neque convallis a cras semper. Bibendum enim facilisis gravida neque convallis a cras semper. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Mauris in aliquam sem fringilla ut morbi tincidunt. Consequat ac felis donec et
odio. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Vel pharetra vel turpis nunc. Velit aliquet sagittis id consectetur purus ut. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Ut faucibus pulvinar elementum integer.
Convallis posuere morbi leo urna molestie at elementum. Justo nec ultrices dui sapien. Sed blandit libero volutpat sed cras ornare arcu dui. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Adipiscing elit ut aliquam purus
sit amet luctus venenatis lectus. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Dictumst quisque sagittis purus sit. Pellentesque nec nam aliquam sem et tortor consequat id. Diam ut venenatis tellus in. Eu nisl nunc mi ipsum
faucibus vitae aliquet nec. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Adipiscing diam donec adipiscing tristique risus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Eget dolor morbi non arcu risus quis
varius. Facilisis volutpat est velit egestas dui. Varius vel pharetra vel turpis nunc eget. Eget mi proin sed libero enim sed faucibus turpis. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Ultricies mi quis hendrerit
dolor magna eget est lorem. Amet facilisis magna etiam tempor orci. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Elit ut aliquam purus sit amet luctus venenatis lectus. Eget lorem dolor sed viverra ipsum nunc. Magna sit amet purus
gravida quis blandit turpis. Eget felis eget nunc lobortis mattis aliquam. Turpis egestas pretium aenean pharetra magna ac. In ornare quam viverra orci sagittis eu volutpat. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat.
Purus in mollis nunc sed id semper risus in hendrerit. Odio tempor orci dapibus ultrices in. Viverra vitae congue eu consequat ac felis donec et odio. Etiam sit amet nisl purus in mollis nunc. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper
velit sed. Nibh tellus molestie nunc non blandit. Pharetra sit amet aliquam id diam maecenas ultricies. Eu facilisis sed odio morbi quis commodo. Id consectetur purus ut faucibus. Blandit cursus risus at ultrices mi tempus. Id interdum velit laoreet
id donec ultrices. Purus gravida quis blandit turpis cursus in. A scelerisque purus semper eget. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. At augue eget arcu dictum varius duis. Suspendisse faucibus interdum posuere lorem.
Id faucibus nisl tincidunt eget nullam. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Tortor posuere ac ut consequat semper viverra. Est lorem ipsum dolor sit amet. Scelerisque eleifend donec pretium vulputate sapien. Tempus iaculis
urna id volutpat lacus laoreet. Tristique nulla aliquet enim tortor. Consectetur a erat nam at lectus. Mi sit amet mauris commodo quis. Purus gravida quis blandit turpis. Mi eget mauris pharetra et ultrices neque ornare. Ornare arcu dui vivamus
arcu. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. At quis risus sed vulputate odio ut. Sed augue lacus viverra vitae. Sit amet purus gravida quis blandit turpis cursus in. Enim blandit volutpat maecenas volutpat blandit aliquam.
Lacus sed turpis tincidunt id aliquet risus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Gravida arcu ac tortor dignissim convallis aenean. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Tortor vitae purus
faucibus ornare suspendisse sed nisi lacus. Varius sit amet mattis vulputate enim. Enim diam vulputate ut pharetra. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Odio
euismod lacinia at quis risus sed. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Massa id neque aliquam vestibulum. Id donec ultrices tincidunt arcu non sodales neque sodales. Iaculis eu non diam phasellus vestibulum lorem sed risus.
Volutpat ac tincidunt vitae semper quis lectus nulla at. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Arcu bibendum at varius vel pharetra vel turpis. Velit aliquet sagittis id consectetur purus ut faucibus. Enim tortor
at auctor urna nunc. Ut etiam sit amet nisl purus in mollis nunc sed. Eu feugiat pretium nibh ipsum consequat. Dui sapien eget mi proin sed. Habitant morbi tristique senectus et netus. Convallis aenean et tortor at risus viverra adipiscing at. Tempus
imperdiet nulla malesuada pellentesque. Massa id neque aliquam vestibulum morbi blandit cursus risus. Adipiscing bibendum est ultricies integer. Luctus accumsan tortor posuere ac ut consequat. Nulla facilisi etiam dignissim diam quis enim lobortis
scelerisque. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Placerat in egestas erat imperdiet sed euismod nisi porta. Est sit amet facilisis magna etiam tempor orci eu lobortis. Tortor at risus viverra adipiscing at in. Sed cras
ornare arcu dui vivamus. Neque laoreet suspendisse interdum consectetur. Dui faucibus in ornare quam viverra orci. Cursus sit amet dictum sit amet justo donec enim. Maecenas volutpat blandit aliquam etiam erat velit. Id nibh tortor id aliquet lectus
proin. Vulputate ut pharetra sit amet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Tincidunt dui ut ornare lectus sit amet. Diam donec adipiscing tristique risus
nec feugiat in fermentum posuere. Lacinia quis vel eros donec ac odio tempor orci. Sodales ut eu sem integer vitae justo eget magna. Id leo in vitae turpis massa sed. Aenean et tortor at risus viverra adipiscing at. Malesuada pellentesque elit eget
gravida cum sociis natoque penatibus et. Feugiat vivamus at augue eget arcu dictum varius duis at. Quis auctor elit sed vulputate mi sit amet mauris. Duis ut diam quam nulla porttitor massa id neque aliquam. Dictum varius duis at consectetur lorem
donec massa. Sagittis orci a scelerisque purus semper eget. Arcu felis bibendum ut tristique et. Nibh ipsum consequat nisl vel. Fermentum odio eu feugiat pretium nibh ipsum consequat. Amet commodo nulla facilisi nullam vehicula ipsum a. Enim tortor
at auctor urna nunc id. Faucibus nisl tincidunt eget nullam non. Volutpat odio facilisis mauris sit amet massa. Elementum integer enim neque volutpat ac tincidunt vitae semper. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae.
In tellus integer feugiat scelerisque varius morbi enim. At consectetur lorem donec massa. Tristique risus nec feugiat in fermentum posuere urna. Diam in arcu cursus euismod quis viverra nibh cras. Pellentesque nec nam aliquam sem et tortor consequat
id. Sem viverra aliquet eget sit amet tellus. Diam vel quam elementum pulvinar. Nec ultrices dui sapien eget mi proin. Eget egestas purus viverra accumsan in nisl nisi scelerisque. Vulputate odio ut enim blandit. Habitasse platea dictumst vestibulum
rhoncus est pellentesque elit. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Integer eget aliquet nibh
praesent tristique magna sit. Ut pharetra sit amet aliquam. Aenean et tortor at risus viverra.</p>
</div>
<div id="footer">This will be footer</div>
</div>
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>
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>
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>