I have a header that I need to fixed to top and change it's background while scroll down. Do I need to use jQuery? I tried to use position:fixed but it's not working properly.
Here are my code samples,
header {
padding: 20px 0;
position: fixed;
}
.logo-div {
margin: 30px 0;
}
<header>
<div class="header-panel">
<div class="col-xs-6 col-md-4 col-sm-4 logo-div">
<img id="headerLogo" src="images/logo.png" alt="logo">
</div>
<div class="col-xs-6 col-md-5 col-sm-6 menu pull-right">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
<div class=" navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="">Sign In <i class="fa fa-user-o user-icon" aria-hidden="true"></i></li>
<li>Retrieve Quotes</li>
<li>
<i class="fa fa-bars menu-icon" aria-hidden="true"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</header>
Original look.
It just looks this way now.
You can use position: fixed; on the header, and use this function:
$(document).scroll(function() {
if($(window).scrollTop() != 0) {
$("header").css('background-color', 'transparent');
}
if($(window).scrollTop() == 0) {
$("header").css('background-color', 'darkgrey');
}
});
To change the header colour if the div's not at the top.
$(document).scroll(function() {
if($(window).scrollTop() != 0) {
$("header").css('background-color', 'transparent');
}
if($(window).scrollTop() == 0) {
$("header").css('background-color', 'darkgrey');
}
});
header {
height: 50px;
background-color: darkgrey;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
div {
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>stuff stuff</header>
<div id="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ultricies sapien, a volutpat risus. In nec tempus diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed et neque erat. Etiam pulvinar metus augue, nec facilisis
ipsum semper vitae. Maecenas tincidunt feugiat ex, sit amet eleifend orci placerat vel. Vivamus ac ullamcorper ipsum, vehicula lacinia lacus. Nam auctor, nisi sit amet vehicula fringilla, ex orci aliquam neque, in fermentum velit diam ac purus. Nunc
sed efficitur dui. Curabitur enim metus, rutrum ut mattis non, molestie a nisi. Vivamus non fermentum purus. Integer ornare enim ut commodo scelerisque. Cras tincidunt tortor feugiat libero facilisis mattis. Etiam facilisis est eu massa bibendum porttitor.
Proin tincidunt orci ut pellentesque euismod. Donec pretium velit ac dolor rhoncus, eu scelerisque nisl blandit. Pellentesque dapibus et lacus auctor tincidunt. Quisque sit amet ullamcorper dolor. Cras scelerisque congue vehicula. Nam aliquet suscipit
ex, id pulvinar augue suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque bibendum, turpis eget suscipit scelerisque, diam mi facilisis quam, et vehicula nisi nisl faucibus dui. Aenean id malesuada velit. Sed pellentesque,
nulla at pulvinar fringilla, augue neque suscipit augue, non porta nulla erat in leo. Nunc sollicitudin dolor quis posuere lobortis. Donec at aliquam neque. Integer nec urna odio. Suspendisse maximus molestie sem pharetra elementum. Vestibulum at elit
id lorem venenatis finibus. Sed luctus nulla dignissim mauris euismod, quis blandit augue rutrum. Nulla facilisi. Nullam bibendum arcu risus, nec scelerisque nisl pharetra ut. Praesent consectetur eleifend lectus, in ornare ipsum. Cras aliquam quis
urna quis commodo. Cras fermentum lacinia risus, quis fringilla turpis vestibulum eu. Pellentesque luctus iaculis efficitur. Nam et mauris condimentum, blandit ante quis, vulputate sapien. Mauris mollis odio id dolor pharetra, nec volutpat nibh cursus.
Nam sed lacinia libero, eget hendrerit elit. Donec laoreet sapien non dolor congue, nec pellentesque libero semper. Vestibulum efficitur at ipsum vitae ultricies. Ut nec neque vestibulum, varius augue quis, feugiat libero. Sed feugiat lectus id rhoncus
laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac malesuada justo, pharetra maximus nunc. Nam hendrerit neque vel blandit gravida. Aenean congue facilisis elit, a eleifend quam pharetra nec.
Integer id luctus ipsum, id aliquet nunc. Integer pulvinar iaculis eros, ultrices ullamcorper tellus congue in. Suspendisse blandit ullamcorper ipsum, sed cursus nulla lobortis venenatis. Maecenas venenatis pretium diam, quis laoreet libero dictum eu.
Fusce elementum mattis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut cursus libero. Integer eget tempor dui, ut volutpat tortor. Sed sodales dolor a leo ultricies, id mollis augue convallis. Duis at egestas lectus.
Nunc ultricies magna quis justo euismod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ultricies sapien, a volutpat risus. In nec tempus diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed et neque
erat. Etiam pulvinar metus augue, nec facilisis ipsum semper vitae. Maecenas tincidunt feugiat ex, sit amet eleifend orci placerat vel. Vivamus ac ullamcorper ipsum, vehicula lacinia lacus. Nam auctor, nisi sit amet vehicula fringilla, ex orci aliquam
neque, in fermentum velit diam ac purus. Nunc sed efficitur dui. Curabitur enim metus, rutrum ut mattis non, molestie a nisi. Vivamus non fermentum purus. Integer ornare enim ut commodo scelerisque. Cras tincidunt tortor feugiat libero facilisis mattis.
Etiam facilisis est eu massa bibendum porttitor. Proin tincidunt orci ut pellentesque euismod. Donec pretium velit ac dolor rhoncus, eu scelerisque nisl blandit. Pellentesque dapibus et lacus auctor tincidunt. Quisque sit amet ullamcorper dolor. Cras
scelerisque congue vehicula. Nam aliquet suscipit ex, id pulvinar augue suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque bibendum, turpis eget suscipit scelerisque, diam mi facilisis quam, et vehicula nisi nisl faucibus
dui. Aenean id malesuada velit. Sed pellentesque, nulla at pulvinar fringilla, augue neque suscipit augue, non porta nulla erat in leo. Nunc sollicitudin dolor quis posuere lobortis. Donec at aliquam neque. Integer nec urna odio. Suspendisse maximus
molestie sem pharetra elementum. Vestibulum at elit id lorem venenatis finibus. Sed luctus nulla dignissim mauris euismod, quis blandit augue rutrum. Nulla facilisi. Nullam bibendum arcu risus, nec scelerisque nisl pharetra ut. Praesent consectetur
eleifend lectus, in ornare ipsum. Cras aliquam quis urna quis commodo. Cras fermentum lacinia risus, quis fringilla turpis vestibulum eu. Pellentesque luctus iaculis efficitur. Nam et mauris condimentum, blandit ante quis, vulputate sapien. Mauris mollis
odio id dolor pharetra, nec volutpat nibh cursus. Nam sed lacinia libero, eget hendrerit elit. Donec laoreet sapien non dolor congue, nec pellentesque libero semper. Vestibulum efficitur at ipsum vitae ultricies. Ut nec neque vestibulum, varius augue
quis, feugiat libero. Sed feugiat lectus id rhoncus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac malesuada justo, pharetra maximus nunc. Nam hendrerit neque vel blandit gravida. Aenean
congue facilisis elit, a eleifend quam pharetra nec. Integer id luctus ipsum, id aliquet nunc. Integer pulvinar iaculis eros, ultrices ullamcorper tellus congue in. Suspendisse blandit ullamcorper ipsum, sed cursus nulla lobortis venenatis. Maecenas
venenatis pretium diam, quis laoreet libero dictum eu. Fusce elementum mattis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut cursus libero. Integer eget tempor dui, ut volutpat tortor. Sed sodales dolor a leo ultricies,
id mollis augue convallis. Duis at egestas lectus. Nunc ultricies magna quis justo euismod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ultricies sapien, a volutpat risus. In nec tempus diam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Sed et neque erat. Etiam pulvinar metus augue, nec facilisis ipsum semper vitae. Maecenas tincidunt feugiat ex, sit amet eleifend orci placerat vel. Vivamus ac ullamcorper ipsum, vehicula lacinia lacus. Nam auctor,
nisi sit amet vehicula fringilla, ex orci aliquam neque, in fermentum velit diam ac purus. Nunc sed efficitur dui. Curabitur enim metus, rutrum ut mattis non, molestie a nisi. Vivamus non fermentum purus. Integer ornare enim ut commodo scelerisque.
Cras tincidunt tortor feugiat libero facilisis mattis. Etiam facilisis est eu massa bibendum porttitor. Proin tincidunt orci ut pellentesque euismod. Donec pretium velit ac dolor rhoncus, eu scelerisque nisl blandit. Pellentesque dapibus et lacus auctor
tincidunt. Quisque sit amet ullamcorper dolor. Cras scelerisque congue vehicula. Nam aliquet suscipit ex, id pulvinar augue suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque bibendum, turpis eget suscipit scelerisque,
diam mi facilisis quam, et vehicula nisi nisl faucibus dui. Aenean id malesuada velit. Sed pellentesque, nulla at pulvinar fringilla, augue neque suscipit augue, non porta nulla erat in leo. Nunc sollicitudin dolor quis posuere lobortis. Donec at aliquam
neque. Integer nec urna odio. Suspendisse maximus molestie sem pharetra elementum. Vestibulum at elit id lorem venenatis finibus. Sed luctus nulla dignissim mauris euismod, quis blandit augue rutrum. Nulla facilisi. Nullam bibendum arcu risus, nec scelerisque
nisl pharetra ut. Praesent consectetur eleifend lectus, in ornare ipsum. Cras aliquam quis urna quis commodo. Cras fermentum lacinia risus, quis fringilla turpis vestibulum eu. Pellentesque luctus iaculis efficitur. Nam et mauris condimentum, blandit
ante quis, vulputate sapien. Mauris mollis odio id dolor pharetra, nec volutpat nibh cursus. Nam sed lacinia libero, eget hendrerit elit. Donec laoreet sapien non dolor congue, nec pellentesque libero semper. Vestibulum efficitur at ipsum vitae ultricies.
Ut nec neque vestibulum, varius augue quis, feugiat libero. Sed feugiat lectus id rhoncus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac malesuada justo, pharetra maximus nunc. Nam hendrerit
neque vel blandit gravida. Aenean congue facilisis elit, a eleifend quam pharetra nec. Integer id luctus ipsum, id aliquet nunc. Integer pulvinar iaculis eros, ultrices ullamcorper tellus congue in. Suspendisse blandit ullamcorper ipsum, sed cursus
nulla lobortis venenatis. Maecenas venenatis pretium diam, quis laoreet libero dictum eu. Fusce elementum mattis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut cursus libero. Integer eget tempor dui, ut volutpat tortor.
Sed sodales dolor a leo ultricies, id mollis augue convallis. Duis at egestas lectus. Nunc ultricies magna quis justo euismod tempor.
</div>
Try using a flexbox to created a fixed header with a scrollable body.
Stuff like fixed and absolute should really be for stuff that you don't mind overlapping other stuff. Like small icons that scroll back up to the top, etc.
.flex {
display: flex;
flex-direction: column;
height: 100vh;
}
#header {
height: 100px;
background-color: red;
}
#body {
flex: 1;
background-color: blue;
overflow: auto;
}
<div class="flex">
<div id="header">
stuff
</div>
<div id="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis augue et ligula porta auctor. Donec ac metus sollicitudin, tristique arcu nec, consectetur orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dictum leo quis odio sollicitudin ultrices. Praesent urna ligula, accumsan vel imperdiet in, sagittis at lorem. Integer luctus consectetur vestibulum. Etiam sollicitudin facilisis sem, pretium facilisis sem placerat ut. Donec sit amet lacinia dolor, varius mattis mi. Donec sed est pharetra, rhoncus tortor non, fringilla dolor. Praesent elit magna, semper sed commodo vitae, auctor id nisi. Phasellus vel dignissim orci. Maecenas tellus lacus, sollicitudin at felis et, facilisis euismod nibh. Donec a leo tellus.
Fusce dolor erat, malesuada at sapien a, pretium mattis sapien. Morbi ut risus ut diam cursus rhoncus. Fusce eu molestie ipsum, venenatis lobortis metus. Vivamus eget egestas lectus. Proin iaculis porta nibh, at ullamcorper augue aliquam nec. Sed faucibus nisl nec risus porttitor eleifend. Donec ultricies nulla ac metus consectetur, sit amet faucibus risus dignissim. Vestibulum vitae nisi pellentesque, vulputate nibh sed, ullamcorper mi. Nunc ultricies nisl at nulla sollicitudin ullamcorper. Vivamus egestas placerat tempus. Nam fermentum eu felis non semper. Aliquam nunc justo, viverra ac eleifend ut, pulvinar vitae risus. Vestibulum sollicitudin non ipsum in tempus.
Mauris ut massa eget mauris varius faucibus. Suspendisse tellus felis, posuere vel accumsan a, molestie venenatis libero. Sed vel nunc in libero varius dapibus consectetur a sapien. Duis sagittis pellentesque sem, eu bibendum odio consectetur aliquet. Aliquam et purus risus. Nulla a posuere libero. Sed aliquet convallis efficitur. Curabitur aliquam, turpis id tempor molestie, est quam egestas ipsum, at feugiat nunc nulla sed elit. Aliquam venenatis convallis lacus, in ornare erat dignissim vel. Morbi ac rhoncus leo, in feugiat massa. Suspendisse non velit in dolor lacinia vulputate eu a ex. Ut tristique rhoncus consequat. Quisque malesuada aliquet massa, at viverra odio sagittis eu. Duis posuere a velit quis porttitor. Phasellus eu libero ultricies, tincidunt arcu placerat, commodo quam. Donec quis orci laoreet, auctor ligula at, dictum mi.
Etiam dictum nisl orci, sit amet venenatis purus viverra ut. Donec hendrerit felis id convallis placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam lacus ut nisi feugiat, et ultricies augue consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In tincidunt metus a justo placerat porta. Donec porta id est in scelerisque. Cras semper massa neque, vitae ultrices mauris pulvinar id. Fusce eu luctus neque, ac tincidunt eros. Nullam eleifend tincidunt arcu a cursus. Curabitur dictum semper augue, euismod varius neque vestibulum vitae. Nam tortor lectus, tempus non auctor id, sollicitudin nec elit. Duis ut odio et tortor maximus varius. Sed fringilla sit amet ipsum hendrerit cursus. Duis id urna dolor.
Mauris tincidunt odio non maximus condimentum. Vivamus velit enim, interdum eget feugiat nec, tincidunt sed sem. Nullam imperdiet erat urna, ut maximus odio bibendum eu. Morbi porttitor ante eget malesuada hendrerit. Nulla pulvinar risus posuere, placerat ligula ac, pharetra neque. Vivamus id lorem id risus ullamcorper sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus, velit vitae tristique consectetur, lorem urna rutrum mi, vitae tristique est velit posuere diam. In hac habitasse platea dictumst. Fusce dictum lobortis metus, et posuere arcu venenatis vel.
Nunc odio mi, varius at vulputate in, accumsan ac justo. Nunc vel blandit odio. Vivamus et suscipit velit, a dignissim libero. Sed vel velit ante. Mauris scelerisque, elit at tempor eleifend, orci elit placerat nisl, ut suscipit augue turpis et ipsum. Pellentesque efficitur sapien mauris, non venenatis justo commodo eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sed nibh nec sem interdum tristique quis sit amet massa. Suspendisse vel mauris magna. Integer id sapien ac libero lacinia ullamcorper nec eget enim. Nullam eget nunc non lectus congue condimentum. Etiam fermentum consectetur felis, et pulvinar nibh iaculis id. Ut felis lacus, consequat id mattis eu, volutpat quis urna. Sed nisi neque, malesuada quis nibh sit amet, aliquam vehicula tellus. Cras pharetra nisi nec metus pretium ullamcorper in quis leo. Etiam mi diam, venenatis non lorem a, suscipit tempor est.
Sed sit amet finibus ligula. Cras sit amet magna et nisi elementum tristique eget quis metus. Aenean efficitur ac sem vulputate efficitur. Nullam felis nibh, dictum ac iaculis non, molestie eu urna. Donec arcu turpis, tempor sed risus at, pharetra varius elit. Praesent cursus justo metus, at tristique ligula suscipit at. Aenean vel pellentesque eros. Aenean sit amet nisl vehicula, posuere felis in, egestas lectus. Praesent sollicitudin dictum diam sed lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi dapibus scelerisque lorem, eget vehicula tellus condimentum eget. Phasellus scelerisque leo nec risus imperdiet molestie. Suspendisse nec lacus at magna tristique pellentesque nec vel libero.
Proin in finibus erat. Ut sodales urna non purus gravida luctus. Quisque imperdiet eros scelerisque felis auctor ultrices. Phasellus lacinia enim et ligula sollicitudin vestibulum. Quisque semper libero quis mauris feugiat volutpat. Mauris ac eleifend diam, ac semper risus. Duis eget luctus neque, at molestie nisl. Nulla volutpat maximus vulputate. Nunc pretium velit in neque vestibulum, blandit lacinia augue efficitur. Maecenas sem sem, condimentum sed dolor vulputate, gravida lobortis dolor. Aenean efficitur nibh vitae lacus gravida ornare. Mauris sagittis ex lacus, ut congue augue interdum in. Morbi nec congue odio. Quisque eleifend mi at convallis interdum. Nunc at congue dolor, quis blandit nunc. Maecenas molestie sollicitudin sem in scelerisque.
Donec sed pellentesque urna, eu fringilla tellus. Nullam at fermentum eros. Nam viverra est at est mattis, lobortis volutpat massa accumsan. Nunc vel faucibus risus. Vivamus a urna hendrerit, ullamcorper tellus aliquet, sagittis felis. Sed eget nisl tempus, congue nisi nec, accumsan purus. Donec molestie metus eget lorem imperdiet facilisis. Donec vulputate ut sem rutrum tincidunt. Nulla at lectus at dui imperdiet tincidunt non blandit enim. Vivamus accumsan risus eget porttitor aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla maximus blandit mauris, vel consectetur leo auctor et. Mauris non diam a neque tincidunt euismod. Donec non augue porttitor, imperdiet metus eget, laoreet ex. Nulla ut accumsan magna, id venenatis est. Nunc tempus dolor non velit vestibulum, sit amet finibus risus pulvinar. Sed egestas dapibus turpis, eu scelerisque quam sollicitudin id. Vivamus libero magna, congue quis volutpat eget, vestibulum nec ex. Curabitur auctor eros in ultrices scelerisque. Vestibulum lacinia hendrerit euismod. Nam ut ultricies eros. Mauris sed tortor mi. Mauris dolor metus, euismod sit amet quam sed, efficitur dapibus risus. Quisque aliquet molestie nisl id semper. Sed venenatis augue vitae cursus volutpat. In id nulla vel quam vehicula ornare.
</div>
</div>
Related
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>
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>
I discovered multicolumn CSS for me, however found that when printing these styles are ignored.
Is this a known bug? Or did I do something wrong?
div {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
font-size: 16px;
line-height: 1.6;
width: 760px;
}
#media print {
button {
display: none;
}
}
<button onclick="print()">Print...</button>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed vehicula quam, ut placerat ipsum. Cras suscipit dui nisl, at pretium leo mollis sed. Vestibulum iaculis ultricies nulla at mattis. Ut at augue sed nulla mollis pellentesque. Nulla vel
sollicitudin libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla ligula, sit amet pellentesque velit eleifend ut. Fusce id metus et tellus iaculis vulputate. Aliquam blandit fermentum augue. Cras accumsan fermentum
tempor. In pulvinar magna vitae eros faucibus, vitae scelerisque lacus mollis. Aliquam tincidunt justo eu tortor tincidunt, nec bibendum ligula interdum. Duis sit amet tincidunt sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut erat ipsum, elementum sit amet magna ut, rhoncus convallis nunc. Pellentesque tortor magna, posuere eu orci non, ultrices elementum nisi. Integer quis ullamcorper
mi, id porta sapien. Nam ornare dolor quis nisl imperdiet eleifend. Praesent facilisis fermentum fermentum. Etiam porttitor semper nulla vel tincidunt. Fusce a nunc volutpat, ullamcorper erat id, varius nulla. Integer fringilla urna velit, quis varius
velit interdum at. Maecenas at nisi nulla. Nunc laoreet, odio nec fermentum interdum, felis enim bibendum augue, id consectetur nibh nibh a eros. Quisque non ante venenatis, fringilla ipsum semper, dictum lacus. Nulla facilisi. Pellentesque condimentum
feugiat consectetur. Nullam sollicitudin pellentesque quam sit amet auctor. Vestibulum eget lacus ipsum. Praesent tristique quam vel mi pellentesque, et condimentum justo suscipit. In viverra odio justo, et egestas nulla mattis sed. Etiam id porttitor
orci. Vivamus at cursus quam. Maecenas placerat lacus ut pulvinar imperdiet. Aliquam varius arcu lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare suscipit posuere. Nullam vel sodales nisl,
ac mollis quam. Nam imperdiet faucibus ipsum. Curabitur in felis in mi tempor pharetra. Mauris eu egestas diam. Pellentesque placerat lectus vitae cursus adipiscing. Proin non enim eros. Integer id semper ante. Vivamus pulvinar, libero in laoreet
pellentesque, ipsum lectus suscipit dolor, a mollis erat turpis quis quam. Curabitur sapien orci, lobortis sit amet tincidunt eget, rhoncus id mi. Aliquam accumsan velit sit amet purus ullamcorper congue. In hac habitasse platea dictumst. Aliquam
quis purus venenatis, sagittis augue non, fringilla enim. Nunc non semper justo, nec fermentum tortor. Donec fringilla massa at arcu dictum, at consequat dui faucibus. Cras sed eleifend ante. Etiam non nisi nisi. Nam aliquet felis non turpis pretium,
quis scelerisque tortor auctor. Donec eu porttitor erat. Cras egestas tincidunt erat ac euismod. Ut eget dolor vitae magna commodo iaculis vitae nec purus. Sed vitae eros mi. Donec eu justo urna. Vivamus volutpat rhoncus erat, sit amet malesuada ligula
pellentesque nec. Nullam sollicitudin diam arcu, quis tincidunt dui pretium et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius at libero et pulvinar. Fusce ut tincidunt felis. Ut vulputate cursus facilisis.
Etiam erat nunc, feugiat a vestibulum vel, posuere in leo. Ut ac aliquet turpis, non ultricies mauris. Nam sed elit suscipit, mollis urna eu, laoreet odio. Duis porttitor vulputate magna, eu porta augue adipiscing volutpat. Vestibulum mi lectus, pulvinar
at pharetra sit amet, rhoncus vel lorem. Pellentesque semper, quam sit amet pretium rutrum, ante massa tristique dui, ut interdum quam neque sit amet ligula. Mauris gravida leo eu mauris luctus fringilla. Sed malesuada libero leo, in egestas turpis
laoreet eu. Aenean egestas imperdiet libero sit amet venenatis. Aliquam luctus tristique feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec hendrerit a nibh eu molestie. Nullam enim velit,
bibendum in est et, accumsan condimentum leo. Sed aliquam tempus dolor in imperdiet. Ut sed dignissim felis. Phasellus nec sagittis tortor, eu ultricies sapien. Nulla convallis ipsum eget purus aliquet euismod. Sed vitae arcu sed eros dignissim fermentum.
Integer egestas ultrices purus, ut pulvinar lacus pellentesque in. Vivamus neque ante, elementum nec lacus a, aliquam varius libero. Phasellus consequat, sem facilisis varius fringilla, tellus mi malesuada nulla, ac elementum enim ligula ut diam.
Maecenas feugiat libero dui, eget blandit orci faucibus non. Cras iaculis at metus lobortis iaculis. Etiam nec lobortis metus, in hendrerit lacus. Sed tincidunt scelerisque turpis, non tempus arcu blandit ac. Pellentesque interdum velit at enim porta
dapibus. Phasellus et accumsan nulla. Vestibulum augue erat, congue a sagittis dapibus, volutpat condimentum enim. Proin non ante eget eros scelerisque vestibulum id bibendum quam. Sed imperdiet vitae augue eget dapibus. Integer consectetur ut velit
vel tristique. Sed scelerisque elit felis, ut suscipit elit ultrices vitae. Sed blandit commodo dolor at pulvinar. Vestibulum id consectetur libero. Ut vestibulum pretium ipsum. Suspendisse ac fringilla urna. Aliquam egestas enim nibh, id tristique
nulla pharetra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel neque diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut congue lacus quis accumsan accumsan. Praesent nec
pellentesque mi. Etiam id lorem sed neque tempor imperdiet. Ut molestie velit eu pellentesque rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel lorem in nulla tristique auctor. Cras vitae
hendrerit neque. Aliquam accumsan porttitor malesuada. Fusce malesuada urna id tortor ultrices, at lobortis mauris faucibus. Sed eget enim volutpat, tempor libero ut, hendrerit justo. Pellentesque eu aliquet urna. Morbi laoreet metus suscipit aliquam
pellentesque. Suspendisse mattis ipsum sed mauris faucibus porttitor. Morbi posuere et nisl non euismod. Donec malesuada dapibus eros quis consequat. Duis non aliquet nisl, in pharetra nulla. Vestibulum venenatis risus ac elit scelerisque, a scelerisque
diam rutrum. Maecenas cursus sodales tortor id luctus. Sed eleifend lectus pharetra pulvinar sagittis. Morbi risus orci, molestie sit amet orci nec, aliquet iaculis enim. Suspendisse at lorem suscipit, rutrum odio in, gravida massa. Aliquam vitae
convallis ligula, a hendrerit nunc. Pellentesque tempor blandit ultrices. Curabitur hendrerit libero at adipiscing suscipit. Ut pretium consectetur tincidunt. Quisque facilisis quis enim id hendrerit. Cras aliquam mi orci, tristique porta arcu posuere
lobortis. Ut at felis molestie, pharetra ligula quis, venenatis quam. Integer sit amet sapien eget quam consectetur adipiscing. Sed sit amet ligula a ligula ultrices euismod. Aliquam fermentum, lorem a vehicula tempor, est erat semper ipsum, ac mollis
neque lacus non magna. Curabitur semper sem volutpat justo volutpat varius. Aenean placerat, justo aliquet lobortis scelerisque, libero ipsum tincidunt quam, at gravida augue lacus sit amet nunc. Sed tempor mattis aliquet. Proin vitae ante arcu. Donec
lobortis facilisis eros, vitae condimentum odio fermentum sagittis. Nunc imperdiet erat eget vehicula volutpat. Phasellus eget nulla in nisl vulputate dignissim. Sed tincidunt lectus ac molestie vestibulum. Duis hendrerit dolor a accumsan tempus.
Curabitur eget ante ut dolor vulputate pretium suscipit et lacus. Cras adipiscing est ultricies elementum gravida. Praesent consequat enim justo, sit amet posuere nunc sodales ut. Proin eget risus tempor velit iaculis molestie sit amet ac velit. Cras
in est at tortor lacinia rutrum. Pellentesque lobortis et dolor eget pellentesque. Cras id varius libero. Suspendisse vitae dui ut mauris imperdiet rutrum. Aliquam quis viverra dolor. Cras lacinia massa et dignissim luctus. Pellentesque et lobortis
metus. Etiam sed auctor felis, at cursus neque. Nam ut vehicula augue. Proin commodo aliquam dolor, molestie ullamcorper quam pretium eu. Sed semper, libero quis convallis consequat, leo est porttitor mi, quis blandit lorem lacus eu arcu. Etiam vel
sapien vel dolor facilisis elementum eu sed dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque sapien eros. Integer hendrerit magna non fermentum euismod. Mauris feugiat nisl elit, id viverra
nunc tempus non. Phasellus ut placerat ante. Pellentesque volutpat dolor in odio vulputate rhoncus. Maecenas suscipit placerat quam, ut aliquam velit volutpat a. Cras et turpis tellus. Sed vitae purus vitae orci condimentum suscipit eu non odio. Fusce
non leo eleifend, sagittis augue sed, laoreet dui. Integer adipiscing sapien auctor, luctus sem id, semper enim. Vestibulum facilisis justo vitae enim gravida consequat. Maecenas tempus, mi vitae convallis feugiat, lorem orci bibendum felis, a tincidunt
quam magna et nibh. Aenean tempus nec purus bibendum egestas. Pellentesque ut arcu et arcu aliquam bibendum sed quis est. Nunc pharetra sagittis eleifend. Quisque elementum tortor eget porta elementum. Vivamus ut eros ac nulla facilisis consequat.
Donec venenatis orci ipsum, at ultrices turpis interdum vel. Fusce vitae orci dolor. Morbi sodales eros eros, quis tempus est imperdiet a. Aenean ultricies lorem elit, a rhoncus neque mollis at. Fusce placerat sapien ut cursus condimentum. Nulla consequat
elementum vulputate. Pellentesque gravida volutpat tellus, ac hendrerit nulla sagittis sed. Ut nec turpis elit. Proin in pulvinar nisi. Donec ac condimentum velit. Sed et tortor non justo aliquam iaculis id eget sem. Pellentesque vulputate eu lectus
at ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at egestas sem, nec luctus augue. Mauris sagittis rhoncus bibendum. Morbi laoreet aliquet eros, adipiscing tempor mi vestibulum vitae. Duis massa arcu, aliquet semper
magna id, tristique adipiscing velit. Quisque id rhoncus quam, a euismod justo. Fusce eget ipsum non justo mattis feugiat in in nisi. Donec ac est vehicula, aliquet nisl sed, sodales nunc. Donec luctus ante nunc, in suscipit orci dignissim quis. Nulla
quis dolor rutrum, pharetra lacus a, facilisis ante. Phasellus a hendrerit tellus, eu viverra libero. Nulla luctus risus quis elementum placerat. Fusce rhoncus, purus vitae sollicitudin dapibus, massa nibh sodales nibh, a aliquet ante arcu id diam.
Donec egestas laoreet viverra. Vestibulum at risus a tellus imperdiet tincidunt. Suspendisse suscipit, odio eget ultricies consequat, tellus erat auctor sem, quis placerat quam mauris sit amet felis. Pellentesque aliquam at justo eget blandit. Vivamus
placerat risus et sagittis semper. Vivamus imperdiet vehicula pellentesque. In scelerisque quis mauris vel egestas. Proin eleifend lacinia sollicitudin. Pellentesque varius enim et felis pulvinar euismod. Nullam varius, lorem non commodo mollis, odio
eros posuere sapien, sed aliquam eros enim vel justo. Mauris eleifend porta molestie. Quisque vulputate, leo id tempus facilisis, neque nunc cursus ipsum, et ultricies dui massa quis nibh. Quisque consectetur justo ac venenatis cursus. Nullam ut sapien
ac velit lacinia fermentum vel eu sem. Quisque luctus ac eros vel sagittis. Quisque venenatis sem orci, eu dignissim nulla dignissim nec. Pellentesque eu elementum purus. Nulla placerat sodales lorem quis interdum. Vestibulum sodales ultricies dolor
vitae auctor. Phasellus vel diam purus. Nam eget libero pellentesque, sagittis elit et, pharetra lorem. Quisque elementum nibh et augue ornare, ac rutrum odio blandit. Maecenas ac turpis rutrum, elementum arcu vitae, pulvinar ante. Donec nisi dolor,
dictum at sagittis eget, ornare in erat. Curabitur velit leo, faucibus non turpis quis, suscipit pellentesque elit. Cras in venenatis orci. Maecenas blandit est id augue pellentesque, et faucibus sapien vulputate. Morbi sed molestie risus, sit amet
elementum felis. In non turpis nisi. Nunc bibendum sem sed metus ornare, ut volutpat sem aliquam. Aliquam bibendum adipiscing suscipit. Donec consectetur sem at arcu viverra, a tincidunt velit ullamcorper. Phasellus at metus mi. Proin rhoncus mattis
gravida. Suspendisse pellentesque pharetra turpis, sit amet facilisis orci adipiscing in. Fusce egestas nec nulla in scelerisque. Nulla congue pretium nibh, et scelerisque erat pretium eu. Aenean et nunc mauris. Morbi bibendum urna a aliquet suscipit.
Nunc pretium dapibus lacinia. Fusce dapibus mollis molestie. Nam at interdum metus, eu consequat est. Nulla a metus massa. Vivamus justo eros, tristique ut orci vitae, sollicitudin volutpat felis. Integer consequat justo metus, non adipiscing arcu
tristique in. Aliquam imperdiet ipsum id velit condimentum, sit amet aliquet neque ullamcorper. Nunc mi nibh, dignissim nec mauris sit amet, semper venenatis arcu. Phasellus a rhoncus turpis, interdum blandit metus. Cras sit amet posuere mauris. Donec
at fermentum elit. Praesent sagittis augue ipsum, sed pellentesque arcu tincidunt non. Ut eu purus consequat, adipiscing eros eu, suscipit metus. Sed eu mauris eu lacus feugiat venenatis ac ut velit. Nunc eget aliquam tortor, ac iaculis orci. Quisque quis sodales lectus. Nunc dui felis, aliquam luctus nisi malesuada, ultrices varius risus. Phasellus malesuada eros ut dictum consectetur. In adipiscing condimentum fermentum. Nullam ultrices purus ac dui lobortis vehicula. Donec et dapibus ligula, a bibendum nisl. In hac habitasse platea dictumst. Integer auctor massa vitae mauris fermentum rutrum. Sed urna ligula, tempus eget lectus ac, adipiscing consectetur diam. Cras quis eros vitae ipsum blandit sollicitudin. Curabitur eget ornare ligula, vel pellentesque ipsum. Aliquam volutpat imperdiet ipsum. Sed at orci sit amet nisl elementum pellentesque quis sed dolor. Aliquam nec sem vitae nulla pulvinar viverra. Mauris turpis ipsum, pretium eget neque vel, tempus tempor neque. Etiam malesuada dui sed dui malesuada venenatis. Duis rhoncus id felis in rhoncus. Donec at suscipit erat, sed elementum tortor. Nullam pulvinar, erat quis suscipit placerat, lectus lectus euismod enim, at sollicitudin odio metus at metus. Sed ut enim aliquet, varius enim sit amet, dapibus ipsum.</div>
Here is the Fiddle
I check it in my Ubuntu Chrome.
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
It looks like a known bug in Chrome:
https://code.google.com/p/chromium/issues/detail?id=99358
Btw, there is a related question on stackoverflow: CSS columns breaking when printing
I wanted to add a couple things here:
The Chrome Bug Referenced in Damien's answer is still not fixed yet.
Printing in FireFox works as expected.
Strangely enough, printing in IE11 works. The output is not the same as FireFox, but still yields expected results.
It's not working in chrome, firefox. you have only one solution. use IE for multi column print