I'm trying to make a design where the left hand panel is scrollable should the content of that panel be larger than the content in the main (right hand panel).
I've got part of the way into it using a flexbox layout and flex-direction: row, but the flex box seems to only size to the view height, the right hand content is then overflowing this. The left hand panel has a scroll bar as I want, but the right hand panel size is stopping at the maximum vh.
<script type="text/javascript" src="https://cdn.tailwindcss.com"></script>
<div>
<h1>Test</h1>
</div>
<div class="flex flex-row justify-center h-full items-stretch">
<div class="bg-slate-50 min-h-full min-w-min h-0 basis-1/3 grow-0 shrink-0 overflow-y-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat libero id elementum iaculis. Vestibulum at mauris mauris. Donec blandit nibh rhoncus mollis mattis. Aenean gravida ex sagittis semper aliquet. Suspendisse a dolor enim. Fusce sagittis lectus et eleifend imperdiet. Curabitur iaculis pellentesque rutrum. Fusce et gravida eros. Nam vestibulum pharetra lorem, sed semper leo fermentum nec.</p>
<p>Curabitur varius feugiat maximus. Morbi dolor urna, consectetur ac nisl eget, varius pretium sem. Curabitur aliquam, lectus ut viverra consequat, dolor ligula gravida ex, nec dictum felis mi in enim. Curabitur luctus ligula diam, sed varius orci vehicula a. Ut vehicula imperdiet tempor. Morbi eget sollicitudin mi. Etiam condimentum sem arcu, non dignissim mi ultricies ut. Fusce faucibus sem nec laoreet facilisis. Nullam ut lorem vitae odio gravida rhoncus. Etiam ut orci vitae odio interdum consequat.</p>
<p>Sed felis dui, fermentum ac libero ut, faucibus mattis urna. Morbi at est lobortis, lobortis diam nec, rhoncus augue. Sed at turpis malesuada nulla accumsan accumsan. Mauris pharetra, odio at elementum pharetra, lacus magna luctus sem, sit amet pretium lorem lectus sed libero. Curabitur ullamcorper turpis nunc, a eleifend urna venenatis ac. Vivamus consectetur, nunc quis facilisis vehicula, risus ligula finibus arcu, at vulputate ex dui lobortis dolor. Maecenas tincidunt, lacus et vehicula pulvinar, enim sem venenatis nisi, nec fringilla eros felis quis mauris. Duis luctus eu risus condimentum rutrum. Suspendisse interdum at velit eget mattis. Integer quis porta nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc iaculis, lacus ut dignissim imperdiet, enim enim malesuada quam, id pretium justo neque id ipsum. Vestibulum nec nisl mattis, mattis est sed, venenatis lectus. Quisque sed magna nec purus viverra rhoncus dapibus sed sapien. Quisque id fermentum risus, non vestibulum justo. Donec ultrices enim quis eros porttitor, non posuere tortor viverra.</p>
<p>Phasellus leo ipsum, tristique nec tristique sit amet, molestie eget urna. Aenean suscipit eget ante in vulputate. Morbi tincidunt velit quis lorem gravida, ac scelerisque massa aliquet. Aliquam sem lacus, bibendum ut elit at, mollis dapibus ligula. Suspendisse potenti. Fusce neque est, lobortis a augue a, pretium fermentum turpis. Etiam molestie et odio non rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus condimentum cursus metus eu hendrerit. Vestibulum ultrices, leo eget consectetur tempus, nisi diam maximus orci, sit amet ultricies leo mauris vitae eros.</p>
<p>Aenean eleifend pretium libero ut venenatis. Quisque maximus nulla eget arcu maximus, id rhoncus lectus lobortis. Nullam at ullamcorper nisi. Aliquam erat volutpat. Curabitur efficitur ante in fermentum euismod. Donec id arcu finibus, finibus mauris id, tempor nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis feugiat ligula, id aliquet elit placerat ut. In ac mi elementum, varius urna a, condimentum urna. Sed luctus massa nulla, quis elementum sapien lacinia eu. Vestibulum risus leo, rutrum ac finibus in, iaculis at ligula. Nullam hendrerit mattis eleifend. Sed egestas lectus eu vulputate malesuada.</p>
</div>
<div class="bg-red-400">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat libero id elementum iaculis. Vestibulum at mauris mauris. Donec blandit nibh rhoncus mollis mattis. Aenean gravida ex sagittis semper aliquet. Suspendisse a dolor enim. Fusce sagittis lectus et eleifend imperdiet. Curabitur iaculis pellentesque rutrum. Fusce et gravida eros. Nam vestibulum pharetra lorem, sed semper leo fermentum nec.</p>
<p>Curabitur varius feugiat maximus. Morbi dolor urna, consectetur ac nisl eget, varius pretium sem. Curabitur aliquam, lectus ut viverra consequat, dolor ligula gravida ex, nec dictum felis mi in enim. Curabitur luctus ligula diam, sed varius orci vehicula a. Ut vehicula imperdiet tempor. Morbi eget sollicitudin mi. Etiam condimentum sem arcu, non dignissim mi ultricies ut. Fusce faucibus sem nec laoreet facilisis. Nullam ut lorem vitae odio gravida rhoncus. Etiam ut orci vitae odio interdum consequat.</p>
<p>Sed felis dui, fermentum ac libero ut, faucibus mattis urna. Morbi at est lobortis, lobortis diam nec, rhoncus augue. Sed at turpis malesuada nulla accumsan accumsan. Mauris pharetra, odio at elementum pharetra, lacus magna luctus sem, sit amet pretium lorem lectus sed libero. Curabitur ullamcorper turpis nunc, a eleifend urna venenatis ac. Vivamus consectetur, nunc quis facilisis vehicula, risus ligula finibus arcu, at vulputate ex dui lobortis dolor. Maecenas tincidunt, lacus et vehicula pulvinar, enim sem venenatis nisi, nec fringilla eros felis quis mauris. Duis luctus eu risus condimentum rutrum. Suspendisse interdum at velit eget mattis. Integer quis porta nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc iaculis, lacus ut dignissim imperdiet, enim enim malesuada quam, id pretium justo neque id ipsum. Vestibulum nec nisl mattis, mattis est sed, venenatis lectus. Quisque sed magna nec purus viverra rhoncus dapibus sed sapien. Quisque id fermentum risus, non vestibulum justo. Donec ultrices enim quis eros porttitor, non posuere tortor viverra.</p>
<p>Phasellus leo ipsum, tristique nec tristique sit amet, molestie eget urna. Aenean suscipit eget ante in vulputate. Morbi tincidunt velit quis lorem gravida, ac scelerisque massa aliquet. Aliquam sem lacus, bibendum ut elit at, mollis dapibus ligula. Suspendisse potenti. Fusce neque est, lobortis a augue a, pretium fermentum turpis. Etiam molestie et odio non rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus condimentum cursus metus eu hendrerit. Vestibulum ultrices, leo eget consectetur tempus, nisi diam maximus orci, sit amet ultricies leo mauris vitae eros.</p>
<p>Aenean eleifend pretium libero ut venenatis. Quisque maximus nulla eget arcu maximus, id rhoncus lectus lobortis. Nullam at ullamcorper nisi. Aliquam erat volutpat. Curabitur efficitur ante in fermentum euismod. Donec id arcu finibus, finibus mauris id, tempor nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis feugiat ligula, id aliquet elit placerat ut. In ac mi elementum, varius urna a, condimentum urna. Sed luctus massa nulla, quis elementum sapien lacinia eu. Vestibulum risus leo, rutrum ac finibus in, iaculis at ligula. Nullam hendrerit mattis eleifend. Sed egestas lectus eu vulputate malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat libero id elementum iaculis. Vestibulum at mauris mauris. Donec blandit nibh rhoncus mollis mattis. Aenean gravida ex sagittis semper aliquet. Suspendisse a dolor enim. Fusce sagittis lectus et eleifend imperdiet. Curabitur iaculis pellentesque rutrum. Fusce et gravida eros. Nam vestibulum pharetra lorem, sed semper leo fermentum nec.</p>
<p>Curabitur varius feugiat maximus. Morbi dolor urna, consectetur ac nisl eget, varius pretium sem. Curabitur aliquam, lectus ut viverra consequat, dolor ligula gravida ex, nec dictum felis mi in enim. Curabitur luctus ligula diam, sed varius orci vehicula a. Ut vehicula imperdiet tempor. Morbi eget sollicitudin mi. Etiam condimentum sem arcu, non dignissim mi ultricies ut. Fusce faucibus sem nec laoreet facilisis. Nullam ut lorem vitae odio gravida rhoncus. Etiam ut orci vitae odio interdum consequat.</p>
<p>Sed felis dui, fermentum ac libero ut, faucibus mattis urna. Morbi at est lobortis, lobortis diam nec, rhoncus augue. Sed at turpis malesuada nulla accumsan accumsan. Mauris pharetra, odio at elementum pharetra, lacus magna luctus sem, sit amet pretium lorem lectus sed libero. Curabitur ullamcorper turpis nunc, a eleifend urna venenatis ac. Vivamus consectetur, nunc quis facilisis vehicula, risus ligula finibus arcu, at vulputate ex dui lobortis dolor. Maecenas tincidunt, lacus et vehicula pulvinar, enim sem venenatis nisi, nec fringilla eros felis quis mauris. Duis luctus eu risus condimentum rutrum. Suspendisse interdum at velit eget mattis. Integer quis porta nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc iaculis, lacus ut dignissim imperdiet, enim enim malesuada quam, id pretium justo neque id ipsum. Vestibulum nec nisl mattis, mattis est sed, venenatis lectus. Quisque sed magna nec purus viverra rhoncus dapibus sed sapien. Quisque id fermentum risus, non vestibulum justo. Donec ultrices enim quis eros porttitor, non posuere tortor viverra.</p>
<p>Phasellus leo ipsum, tristique nec tristique sit amet, molestie eget urna. Aenean suscipit eget ante in vulputate. Morbi tincidunt velit quis lorem gravida, ac scelerisque massa aliquet. Aliquam sem lacus, bibendum ut elit at, mollis dapibus ligula. Suspendisse potenti. Fusce neque est, lobortis a augue a, pretium fermentum turpis. Etiam molestie et odio non rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus condimentum cursus metus eu hendrerit. Vestibulum ultrices, leo eget consectetur tempus, nisi diam maximus orci, sit amet ultricies leo mauris vitae eros.</p>
<p>Aenean eleifend pretium libero ut venenatis. Quisque maximus nulla eget arcu maximus, id rhoncus lectus lobortis. Nullam at ullamcorper nisi. Aliquam erat volutpat. Curabitur efficitur ante in fermentum euismod. Donec id arcu finibus, finibus mauris id, tempor nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis feugiat ligula, id aliquet elit placerat ut. In ac mi elementum, varius urna a, condimentum urna. Sed luctus massa nulla, quis elementum sapien lacinia eu. Vestibulum risus leo, rutrum ac finibus in, iaculis at ligula. Nullam hendrerit mattis eleifend. Sed egestas lectus eu vulputate malesuada.</p>
</div>
</div>
When I do this in a snippet for some reason the left hand text disappears.
Is this possible? If so, what am I missing?
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>
How to make a page like https://wordpress.org/themes/twentyseventeen/. (first page)
full screen size bg image
fixed position image
covered by continued content
<body style="background-image: url('http://1.bp.blogspot.com/-hrGFLyJba3U/Uh90QVFp01I/AAAAAAAAFoY/F5R7LBbTox0/s1600/Background-Picture-Html.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; ">
<p style="color:#808080">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus varius rutrum. Vivamus rutrum at nunc id pharetra. Cras consequat semper purus, ac rutrum mauris cursus eu. Nam vitae neque odio. Nunc eget justo quis magna pellentesque scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec consequat dui quis mollis laoreet. Nullam sit amet nisi eget nisi facilisis condimentum. Etiam in libero euismod, lobortis velit quis, convallis libero. Suspendisse lectus est, semper at dictum at, euismod sed turpis. Sed sapien purus, lacinia in mollis in, maximus et leo.</p>
<p style="color:#808080">Mauris purus libero, sagittis ac est at, porta lacinia nulla. Nullam scelerisque orci vitae ligula porta, ut egestas eros maximus. Sed fringilla nunc tortor, vel pretium magna convallis nec. Ut nec felis enim. Integer at est et arcu auctor blandit. Quisque faucibus urna nec augue faucibus, id iaculis justo ultrices. In hac habitasse platea dictumst. Nulla ornare, neque sit amet vestibulum venenatis, justo tortor tincidunt magna, ac vehicula urna nibh eu neque. Pellentesque volutpat nulla vestibulum imperdiet vestibulum.</p>
<p style="color:#808080">Praesent in arcu nisi. Integer sodales hendrerit nunc, non sodales ex. Sed sodales mattis venenatis. Proin ultricies sodales sem, non semper urna semper id. Proin fringilla vehicula cursus. Ut et sodales diam. Curabitur feugiat iaculis volutpat. Vestibulum rutrum hendrerit aliquet. Donec et massa quis ipsum sollicitudin pretium eu pellentesque felis.</p>
<p style="color:#808080">Maecenas pulvinar tristique urna non semper. Morbi porttitor, libero efficitur luctus dictum, nulla risus lobortis sapien, quis porttitor urna ipsum sit amet dolor. Pellentesque ac scelerisque mauris. In hac habitasse platea dictumst. Morbi maximus tellus scelerisque, rutrum quam sed, dignissim ipsum. Duis condimentum diam quis erat tempus, non eleifend felis tincidunt. Aenean laoreet turpis aliquam blandit commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sed efficitur tortor. Duis commodo, ligula sed egestas ultrices, purus quam suscipit nulla, ac cursus nunc libero et orci. Nulla quam est, condimentum volutpat libero id, fringilla finibus enim. Pellentesque maximus rhoncus sapien. Curabitur in placerat nunc. Nullam varius, neque quis fringilla luctus, metus tellus posuere dui, sed rutrum nunc sem tempus odio. Quisque efficitur posuere sollicitudin.</p>
<p style="color:#808080">Maecenas nec sodales erat, sit amet tempus orci. Suspendisse sit amet eros quis nulla mollis lobortis at ut metus. Phasellus faucibus ullamcorper elit, ac congue nulla faucibus vel. Aenean hendrerit felis quis nisi dignissim lobortis. Nunc consequat erat ac nibh hendrerit vehicula. Quisque efficitur fringilla risus in tincidunt. Maecenas eu tempor ante. Mauris vitae volutpat metus. Nulla aliquet orci et elit vehicula, eu cursus libero pharetra. Aliquam nec tortor vel nibh tincidunt sagittis. Curabitur aliquet ex turpis.</p>
</body>
background-image: url('path/to/picture.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
I'm looking here at the element footer.mdl-mini-footer. All given sizes were measured using F12 developer tools in Responsive Mode with a screen size of 768x884 (Chrome's Tablet breakpoint size).
In Firefox, the element footer.mdl-mini-footer has a size of width: 736px; height: 36px;.
In Chrome, the element footer.mdl-mini-footer has a size of width: 736px; height: 10.438px;.
The key point here is the height difference. In both browsers, the child element ul.mdl-mini-footer__link-list has a size of width: 268px; height: 36px;, causing the footer's content to sink beneath the footer element.
Note that the style="padding: 8px 16px" on the footer element is not required for this issue to occur, it just makes it more visible by cutting down on the default padding provided by Material Design Lite of 32px 16px. Specifically, the issue is that the footer's height decreases in Chrome as the page's content has to scroll more. This does not happen in Firefox, and is the desired behavior.
For completeness sake, I also tested the page in Microsoft Edge, which behaves exactly as Firefox. Also, changing Chrome's zoom level to 125% to better match Firefox's zoom level only exacerbates the problem with a new footer height of 8.297px.
Why does this happen only in Chrome, and how can I prevent it?
Stack Snippet in Firefox:
Stack Snippet in Chrome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.deep_purple-blue.min.css">
<script defer="" src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
</head>
<body>
<div class="mdl-layout__container">
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, magna ac ultrices hendrerit, risus lorem accumsan justo, at finibus orci odio at sapien. Morbi eu placerat nisl. Nunc rhoncus ut risus nec eleifend. Nulla facilisi. Morbi
nec nisi facilisis, maximus ligula sed, facilisis enim. Suspendisse fermentum venenatis tincidunt. Maecenas semper consectetur vestibulum. Morbi eget molestie magna. Duis quis neque interdum, elementum risus ac, interdum urna. Nunc fermentum
non nulla vel pharetra. In ullamcorper ac ipsum ut convallis. Morbi bibendum nisi vitae quam commodo porta.</p>
<p>Nam facilisis finibus libero vel consequat. Cras eu magna in dui ullamcorper aliquet nec vestibulum mi. Nam rutrum justo ac risus imperdiet consectetur. Donec pellentesque sapien nec euismod ullamcorper. Nam efficitur quam vitae justo convallis,
a aliquet justo finibus. Pellentesque auctor finibus neque sed dapibus. Ut maximus interdum risus ut viverra. Quisque varius, augue et cursus efficitur, nisl arcu maximus sapien, vel tempor erat elit at turpis. Nullam imperdiet urna eget elit
dignissim, ut feugiat nibh lacinia. Aliquam vel cursus est. Praesent tristique mauris a ex viverra, at vehicula nibh laoreet.</p>
<p>Curabitur lacinia, justo ac placerat porta, lectus nulla aliquam nisi, sit amet elementum enim ipsum vitae tortor. Donec eu ultrices tellus. Nam et quam nisl. Nulla facilisi. Donec turpis velit, tristique et ultrices sit amet, blandit vel tellus.
Nam ultricies posuere odio in pretium. Integer semper, lacus at pulvinar condimentum, nibh nibh ornare dui, vel tincidunt mauris turpis at sapien. Nunc ultrices sollicitudin diam ut semper. Nulla quis quam fringilla, pretium erat eu, hendrerit
tellus. Ut lacinia elit eu leo lobortis tincidunt. Sed vel gravida purus. Fusce ultrices libero ante, sit amet finibus sem eleifend ac. Etiam ullamcorper placerat orci, id vulputate sapien blandit eget. Proin eget hendrerit tellus, sit amet
venenatis dui.</p>
<p>Nullam ut diam et ante euismod suscipit. Sed aliquet rutrum pharetra. Sed quis orci malesuada, elementum tellus id, aliquet eros. Donec ut nisl sit amet erat ornare finibus. Aliquam id tincidunt augue. Sed tincidunt maximus sem at dictum. Fusce
in quam efficitur, finibus sapien a, convallis felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Phasellus tristique auctor diam, euismod cursus mi. Phasellus quis
posuere mi. Integer ut rhoncus massa. Curabitur quis consequat sapien, sit amet malesuada mauris. Vestibulum in tristique ex, ut fermentum velit. Nam ac lobortis dui, eget aliquam ligula. Vestibulum vel leo in purus tincidunt luctus non ut orci.</p>
<p>Integer venenatis vestibulum lorem nec ultrices. In eget commodo velit, in vulputate nisi. Aliquam pulvinar dignissim nisl. Pellentesque congue faucibus enim, a malesuada quam molestie nec. Sed lacinia turpis tellus, eu pretium lectus auctor id.
Sed porta ipsum eu neque volutpat volutpat. Suspendisse rutrum mi felis, nec vulputate velit vulputate quis. Maecenas mollis lobortis neque, nec vehicula orci. Vivamus fringilla volutpat ligula. Proin eu sem eget orci convallis lobortis. Proin
id orci luctus, elementum velit eget, pulvinar orci.</p>
<p>Etiam hendrerit ipsum eros, a semper mi fringilla et. Fusce pretium ac lorem in blandit. Nulla facilisi. Nunc orci lectus, cursus eget semper vitae, interdum non turpis. Suspendisse dolor ante, tincidunt eu urna eu, dapibus consectetur dolor.
In in tortor et lorem euismod semper. Nullam gravida turpis vel commodo ullamcorper. Vestibulum rutrum consequat tortor at blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eget eleifend lectus.
Duis mollis aliquet ipsum eget tempus.</p>
<p>Aliquam viverra neque vitae faucibus posuere. Phasellus facilisis nisl vel risus aliquam commodo. Etiam lacinia laoreet sagittis. Mauris dignissim odio sed diam tempor, dapibus condimentum massa cursus. Integer ut nibh commodo, congue tortor vel,
imperdiet ex. Morbi quis elementum metus, nec consequat purus. Praesent rutrum efficitur tempus. Phasellus hendrerit luctus magna in vehicula. Vestibulum dictum magna nisi, at lacinia lorem vestibulum et.</p>
<p>Aliquam erat volutpat. Phasellus at eleifend ligula. Nam sed placerat nisl, a pulvinar ante. Mauris ac laoreet ante. Aliquam pellentesque leo tortor, sed tempor massa egestas quis. Fusce dictum non turpis sed scelerisque. Nunc tristique nisl ac
ante tristique venenatis. Quisque quis felis rhoncus, porttitor enim sit amet, facilisis quam. Curabitur non erat ac ante faucibus lobortis eget at lorem. Maecenas eget tempus sapien. Curabitur eu luctus nulla, eu luctus ex. Vestibulum sodales
enim enim, sit amet tempor ligula laoreet at. Etiam est arcu, elementum et sodales non, tincidunt et sapien. Fusce vitae molestie mi, a bibendum felis. Sed nunc mauris, faucibus vel rutrum ut, lacinia sit amet neque.</p>
<p>Curabitur blandit lacus ut erat cursus luctus quis blandit ex. Duis eget fringilla risus, et egestas ligula. Pellentesque ligula ante, vulputate in faucibus et, efficitur sed mauris. Aliquam at pretium est, nec tempor mauris. Ut pharetra eget
neque non dapibus. Suspendisse potenti. Nulla blandit tellus vel massa elementum, vel consectetur ligula maximus. Vestibulum rutrum magna sit amet dictum mattis. Morbi varius lacus ac imperdiet fringilla. Suspendisse molestie nibh vitae gravida
sollicitudin. Suspendisse tempor finibus felis, eu sagittis lorem.</p>
<p>Sed sodales ultrices facilisis. Phasellus vel massa id neque convallis volutpat vitae sed turpis. Sed ac massa dolor. Sed facilisis nulla suscipit commodo venenatis. In bibendum consectetur rutrum. Duis dapibus, risus sit amet semper pharetra,
erat dui blandit erat, sit amet rutrum ante est nec enim. Pellentesque lobortis ligula sed fringilla dictum. Proin rhoncus, lacus in facilisis pharetra, lorem leo facilisis metus, ac ornare diam risus sed ipsum. Nullam mattis enim nec odio porttitor
fermentum vel vel mi. Aliquam lacinia consectetur interdum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, magna ac ultrices hendrerit, risus lorem accumsan justo, at finibus orci odio at sapien. Morbi eu placerat nisl. Nunc rhoncus ut risus nec eleifend. Nulla facilisi. Morbi
nec nisi facilisis, maximus ligula sed, facilisis enim. Suspendisse fermentum venenatis tincidunt. Maecenas semper consectetur vestibulum. Morbi eget molestie magna. Duis quis neque interdum, elementum risus ac, interdum urna. Nunc fermentum
non nulla vel pharetra. In ullamcorper ac ipsum ut convallis. Morbi bibendum nisi vitae quam commodo porta.</p>
<p>Nam facilisis finibus libero vel consequat. Cras eu magna in dui ullamcorper aliquet nec vestibulum mi. Nam rutrum justo ac risus imperdiet consectetur. Donec pellentesque sapien nec euismod ullamcorper. Nam efficitur quam vitae justo convallis,
a aliquet justo finibus. Pellentesque auctor finibus neque sed dapibus. Ut maximus interdum risus ut viverra. Quisque varius, augue et cursus efficitur, nisl arcu maximus sapien, vel tempor erat elit at turpis. Nullam imperdiet urna eget elit
dignissim, ut feugiat nibh lacinia. Aliquam vel cursus est. Praesent tristique mauris a ex viverra, at vehicula nibh laoreet.</p>
<p>Curabitur lacinia, justo ac placerat porta, lectus nulla aliquam nisi, sit amet elementum enim ipsum vitae tortor. Donec eu ultrices tellus. Nam et quam nisl. Nulla facilisi. Donec turpis velit, tristique et ultrices sit amet, blandit vel tellus.
Nam ultricies posuere odio in pretium. Integer semper, lacus at pulvinar condimentum, nibh nibh ornare dui, vel tincidunt mauris turpis at sapien. Nunc ultrices sollicitudin diam ut semper. Nulla quis quam fringilla, pretium erat eu, hendrerit
tellus. Ut lacinia elit eu leo lobortis tincidunt. Sed vel gravida purus. Fusce ultrices libero ante, sit amet finibus sem eleifend ac. Etiam ullamcorper placerat orci, id vulputate sapien blandit eget. Proin eget hendrerit tellus, sit amet
venenatis dui.</p>
<p>Nullam ut diam et ante euismod suscipit. Sed aliquet rutrum pharetra. Sed quis orci malesuada, elementum tellus id, aliquet eros. Donec ut nisl sit amet erat ornare finibus. Aliquam id tincidunt augue. Sed tincidunt maximus sem at dictum. Fusce
in quam efficitur, finibus sapien a, convallis felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Phasellus tristique auctor diam, euismod cursus mi. Phasellus quis
posuere mi. Integer ut rhoncus massa. Curabitur quis consequat sapien, sit amet malesuada mauris. Vestibulum in tristique ex, ut fermentum velit. Nam ac lobortis dui, eget aliquam ligula. Vestibulum vel leo in purus tincidunt luctus non ut orci.</p>
<p>Integer venenatis vestibulum lorem nec ultrices. In eget commodo velit, in vulputate nisi. Aliquam pulvinar dignissim nisl. Pellentesque congue faucibus enim, a malesuada quam molestie nec. Sed lacinia turpis tellus, eu pretium lectus auctor id.
Sed porta ipsum eu neque volutpat volutpat. Suspendisse rutrum mi felis, nec vulputate velit vulputate quis. Maecenas mollis lobortis neque, nec vehicula orci. Vivamus fringilla volutpat ligula. Proin eu sem eget orci convallis lobortis. Proin
id orci luctus, elementum velit eget, pulvinar orci.</p>
<p>Etiam hendrerit ipsum eros, a semper mi fringilla et. Fusce pretium ac lorem in blandit. Nulla facilisi. Nunc orci lectus, cursus eget semper vitae, interdum non turpis. Suspendisse dolor ante, tincidunt eu urna eu, dapibus consectetur dolor.
In in tortor et lorem euismod semper. Nullam gravida turpis vel commodo ullamcorper. Vestibulum rutrum consequat tortor at blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eget eleifend lectus.
Duis mollis aliquet ipsum eget tempus.</p>
<p>Aliquam viverra neque vitae faucibus posuere. Phasellus facilisis nisl vel risus aliquam commodo. Etiam lacinia laoreet sagittis. Mauris dignissim odio sed diam tempor, dapibus condimentum massa cursus. Integer ut nibh commodo, congue tortor vel,
imperdiet ex. Morbi quis elementum metus, nec consequat purus. Praesent rutrum efficitur tempus. Phasellus hendrerit luctus magna in vehicula. Vestibulum dictum magna nisi, at lacinia lorem vestibulum et.</p>
<p>Aliquam erat volutpat. Phasellus at eleifend ligula. Nam sed placerat nisl, a pulvinar ante. Mauris ac laoreet ante. Aliquam pellentesque leo tortor, sed tempor massa egestas quis. Fusce dictum non turpis sed scelerisque. Nunc tristique nisl ac
ante tristique venenatis. Quisque quis felis rhoncus, porttitor enim sit amet, facilisis quam. Curabitur non erat ac ante faucibus lobortis eget at lorem. Maecenas eget tempus sapien. Curabitur eu luctus nulla, eu luctus ex. Vestibulum sodales
enim enim, sit amet tempor ligula laoreet at. Etiam est arcu, elementum et sodales non, tincidunt et sapien. Fusce vitae molestie mi, a bibendum felis. Sed nunc mauris, faucibus vel rutrum ut, lacinia sit amet neque.</p>
<p>Curabitur blandit lacus ut erat cursus luctus quis blandit ex. Duis eget fringilla risus, et egestas ligula. Pellentesque ligula ante, vulputate in faucibus et, efficitur sed mauris. Aliquam at pretium est, nec tempor mauris. Ut pharetra eget
neque non dapibus. Suspendisse potenti. Nulla blandit tellus vel massa elementum, vel consectetur ligula maximus. Vestibulum rutrum magna sit amet dictum mattis. Morbi varius lacus ac imperdiet fringilla. Suspendisse molestie nibh vitae gravida
sollicitudin. Suspendisse tempor finibus felis, eu sagittis lorem.</p>
<p>Sed sodales ultrices facilisis. Phasellus vel massa id neque convallis volutpat vitae sed turpis. Sed ac massa dolor. Sed facilisis nulla suscipit commodo venenatis. In bibendum consectetur rutrum. Duis dapibus, risus sit amet semper pharetra,
erat dui blandit erat, sit amet rutrum ante est nec enim. Pellentesque lobortis ligula sed fringilla dictum. Proin rhoncus, lacus in facilisis pharetra, lorem leo facilisis metus, ac ornare diam risus sed ipsum. Nullam mattis enim nec odio porttitor
fermentum vel vel mi. Aliquam lacinia consectetur interdum.</p>
</main>
<footer style="padding: 8px 16px" class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<ul class="mdl-mini-footer__link-list">
<li>
<img alt="GitHub" height="32" src="https://raw.githubusercontent.com/CAD97/SO-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/github-32x32.png">
</li>
<li>
<img alt="YouTube" height="32" src="https://raw.githubusercontent.com/CAD97/SO-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/youtube-45x32.png">
</li>
<li>
<img alt="Twitter" height="32" src="https://raw.githubusercontent.com/CAD97/SO-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/twitter-39x32.png">
</li>
</ul>
</div>
</footer>
</div>
</div>
</body>
</html>
Put the footer within the <main> element here. All page content goes within the mdl-layout__content element. Otherwise the layout javascript is going to mess up and things won't work as expected (as you are seeing.)
This solution retains the "fixed footer" that I had in the question. This means that the footer always displays at the bottom of the screen regardless of how much content is on the page.
The answer provided by Garbee, a maintainer for MDL recommends putting the footer within the content element. This should be considered the only officially supported layout. However, it pushes the footer to the bottom of the page, which is not my desired behavior.
After playing around with different sticky and fixed footer solutions, I found that applying a flex of 0 0 auto to the footer to let Chrome act the same as Firefox. It seems that with a flex-shrink of 1, Chrome shrinks the footer when in this position, where Firefox doesn't, and as the default value for flex is 0 1 auto, this caused the footer to be mishapen on Chrome but not Firefox when in this position.
TL;DR:
.footer {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
.footer {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
<!-- begin snippet: js hide: true console: true -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.deep_purple-blue.min.css">
<script defer="" src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
<main class="mdl-layout__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, magna ac ultrices hendrerit, risus lorem accumsan justo, at finibus orci odio at sapien. Morbi eu placerat nisl. Nunc rhoncus ut risus nec eleifend. Nulla facilisi. Morbi nec
nisi facilisis, maximus ligula sed, facilisis enim. Suspendisse fermentum venenatis tincidunt. Maecenas semper consectetur vestibulum. Morbi eget molestie magna. Duis quis neque interdum, elementum risus ac, interdum urna. Nunc fermentum non nulla
vel pharetra. In ullamcorper ac ipsum ut convallis. Morbi bibendum nisi vitae quam commodo porta.</p>
<p>Nam facilisis finibus libero vel consequat. Cras eu magna in dui ullamcorper aliquet nec vestibulum mi. Nam rutrum justo ac risus imperdiet consectetur. Donec pellentesque sapien nec euismod ullamcorper. Nam efficitur quam vitae justo convallis,
a aliquet justo finibus. Pellentesque auctor finibus neque sed dapibus. Ut maximus interdum risus ut viverra. Quisque varius, augue et cursus efficitur, nisl arcu maximus sapien, vel tempor erat elit at turpis. Nullam imperdiet urna eget elit
dignissim, ut feugiat nibh lacinia. Aliquam vel cursus est. Praesent tristique mauris a ex viverra, at vehicula nibh laoreet.</p>
<p>Curabitur lacinia, justo ac placerat porta, lectus nulla aliquam nisi, sit amet elementum enim ipsum vitae tortor. Donec eu ultrices tellus. Nam et quam nisl. Nulla facilisi. Donec turpis velit, tristique et ultrices sit amet, blandit vel tellus.
Nam ultricies posuere odio in pretium. Integer semper, lacus at pulvinar condimentum, nibh nibh ornare dui, vel tincidunt mauris turpis at sapien. Nunc ultrices sollicitudin diam ut semper. Nulla quis quam fringilla, pretium erat eu, hendrerit
tellus. Ut lacinia elit eu leo lobortis tincidunt. Sed vel gravida purus. Fusce ultrices libero ante, sit amet finibus sem eleifend ac. Etiam ullamcorper placerat orci, id vulputate sapien blandit eget. Proin eget hendrerit tellus, sit amet venenatis
dui.
</p>
<p>Nullam ut diam et ante euismod suscipit. Sed aliquet rutrum pharetra. Sed quis orci malesuada, elementum tellus id, aliquet eros. Donec ut nisl sit amet erat ornare finibus. Aliquam id tincidunt augue. Sed tincidunt maximus sem at dictum. Fusce
in quam efficitur, finibus sapien a, convallis felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Phasellus tristique auctor diam, euismod cursus mi. Phasellus quis posuere
mi. Integer ut rhoncus massa. Curabitur quis consequat sapien, sit amet malesuada mauris. Vestibulum in tristique ex, ut fermentum velit. Nam ac lobortis dui, eget aliquam ligula. Vestibulum vel leo in purus tincidunt luctus non ut orci.</p>
<p>Integer venenatis vestibulum lorem nec ultrices. In eget commodo velit, in vulputate nisi. Aliquam pulvinar dignissim nisl. Pellentesque congue faucibus enim, a malesuada quam molestie nec. Sed lacinia turpis tellus, eu pretium lectus auctor id.
Sed porta ipsum eu neque volutpat volutpat. Suspendisse rutrum mi felis, nec vulputate velit vulputate quis. Maecenas mollis lobortis neque, nec vehicula orci. Vivamus fringilla volutpat ligula. Proin eu sem eget orci convallis lobortis. Proin
id orci luctus, elementum velit eget, pulvinar orci.</p>
<p>Etiam hendrerit ipsum eros, a semper mi fringilla et. Fusce pretium ac lorem in blandit. Nulla facilisi. Nunc orci lectus, cursus eget semper vitae, interdum non turpis. Suspendisse dolor ante, tincidunt eu urna eu, dapibus consectetur dolor. In
in tortor et lorem euismod semper. Nullam gravida turpis vel commodo ullamcorper. Vestibulum rutrum consequat tortor at blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eget eleifend lectus. Duis
mollis aliquet ipsum eget tempus.</p>
<p>Aliquam viverra neque vitae faucibus posuere. Phasellus facilisis nisl vel risus aliquam commodo. Etiam lacinia laoreet sagittis. Mauris dignissim odio sed diam tempor, dapibus condimentum massa cursus. Integer ut nibh commodo, congue tortor vel,
imperdiet ex. Morbi quis elementum metus, nec consequat purus. Praesent rutrum efficitur tempus. Phasellus hendrerit luctus magna in vehicula. Vestibulum dictum magna nisi, at lacinia lorem vestibulum et.</p>
<p>Aliquam erat volutpat. Phasellus at eleifend ligula. Nam sed placerat nisl, a pulvinar ante. Mauris ac laoreet ante. Aliquam pellentesque leo tortor, sed tempor massa egestas quis. Fusce dictum non turpis sed scelerisque. Nunc tristique nisl ac
ante tristique venenatis. Quisque quis felis rhoncus, porttitor enim sit amet, facilisis quam. Curabitur non erat ac ante faucibus lobortis eget at lorem. Maecenas eget tempus sapien. Curabitur eu luctus nulla, eu luctus ex. Vestibulum sodales
enim enim, sit amet tempor ligula laoreet at. Etiam est arcu, elementum et sodales non, tincidunt et sapien. Fusce vitae molestie mi, a bibendum felis. Sed nunc mauris, faucibus vel rutrum ut, lacinia sit amet neque.</p>
<p>Curabitur blandit lacus ut erat cursus luctus quis blandit ex. Duis eget fringilla risus, et egestas ligula. Pellentesque ligula ante, vulputate in faucibus et, efficitur sed mauris. Aliquam at pretium est, nec tempor mauris. Ut pharetra eget neque
non dapibus. Suspendisse potenti. Nulla blandit tellus vel massa elementum, vel consectetur ligula maximus. Vestibulum rutrum magna sit amet dictum mattis. Morbi varius lacus ac imperdiet fringilla. Suspendisse molestie nibh vitae gravida sollicitudin.
Suspendisse tempor finibus felis, eu sagittis lorem.</p>
<p>Sed sodales ultrices facilisis. Phasellus vel massa id neque convallis volutpat vitae sed turpis. Sed ac massa dolor. Sed facilisis nulla suscipit commodo venenatis. In bibendum consectetur rutrum. Duis dapibus, risus sit amet semper pharetra, erat
dui blandit erat, sit amet rutrum ante est nec enim. Pellentesque lobortis ligula sed fringilla dictum. Proin rhoncus, lacus in facilisis pharetra, lorem leo facilisis metus, ac ornare diam risus sed ipsum. Nullam mattis enim nec odio porttitor
fermentum vel vel mi. Aliquam lacinia consectetur interdum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, magna ac ultrices hendrerit, risus lorem accumsan justo, at finibus orci odio at sapien. Morbi eu placerat nisl. Nunc rhoncus ut risus nec eleifend. Nulla facilisi. Morbi nec
nisi facilisis, maximus ligula sed, facilisis enim. Suspendisse fermentum venenatis tincidunt. Maecenas semper consectetur vestibulum. Morbi eget molestie magna. Duis quis neque interdum, elementum risus ac, interdum urna. Nunc fermentum non nulla
vel pharetra. In ullamcorper ac ipsum ut convallis. Morbi bibendum nisi vitae quam commodo porta.</p>
<p>Nam facilisis finibus libero vel consequat. Cras eu magna in dui ullamcorper aliquet nec vestibulum mi. Nam rutrum justo ac risus imperdiet consectetur. Donec pellentesque sapien nec euismod ullamcorper. Nam efficitur quam vitae justo convallis,
a aliquet justo finibus. Pellentesque auctor finibus neque sed dapibus. Ut maximus interdum risus ut viverra. Quisque varius, augue et cursus efficitur, nisl arcu maximus sapien, vel tempor erat elit at turpis. Nullam imperdiet urna eget elit
dignissim, ut feugiat nibh lacinia. Aliquam vel cursus est. Praesent tristique mauris a ex viverra, at vehicula nibh laoreet.</p>
<p>Curabitur lacinia, justo ac placerat porta, lectus nulla aliquam nisi, sit amet elementum enim ipsum vitae tortor. Donec eu ultrices tellus. Nam et quam nisl. Nulla facilisi. Donec turpis velit, tristique et ultrices sit amet, blandit vel tellus.
Nam ultricies posuere odio in pretium. Integer semper, lacus at pulvinar condimentum, nibh nibh ornare dui, vel tincidunt mauris turpis at sapien. Nunc ultrices sollicitudin diam ut semper. Nulla quis quam fringilla, pretium erat eu, hendrerit
tellus. Ut lacinia elit eu leo lobortis tincidunt. Sed vel gravida purus. Fusce ultrices libero ante, sit amet finibus sem eleifend ac. Etiam ullamcorper placerat orci, id vulputate sapien blandit eget. Proin eget hendrerit tellus, sit amet venenatis
dui.
</p>
<p>Nullam ut diam et ante euismod suscipit. Sed aliquet rutrum pharetra. Sed quis orci malesuada, elementum tellus id, aliquet eros. Donec ut nisl sit amet erat ornare finibus. Aliquam id tincidunt augue. Sed tincidunt maximus sem at dictum. Fusce
in quam efficitur, finibus sapien a, convallis felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Phasellus tristique auctor diam, euismod cursus mi. Phasellus quis posuere
mi. Integer ut rhoncus massa. Curabitur quis consequat sapien, sit amet malesuada mauris. Vestibulum in tristique ex, ut fermentum velit. Nam ac lobortis dui, eget aliquam ligula. Vestibulum vel leo in purus tincidunt luctus non ut orci.</p>
<p>Integer venenatis vestibulum lorem nec ultrices. In eget commodo velit, in vulputate nisi. Aliquam pulvinar dignissim nisl. Pellentesque congue faucibus enim, a malesuada quam molestie nec. Sed lacinia turpis tellus, eu pretium lectus auctor id.
Sed porta ipsum eu neque volutpat volutpat. Suspendisse rutrum mi felis, nec vulputate velit vulputate quis. Maecenas mollis lobortis neque, nec vehicula orci. Vivamus fringilla volutpat ligula. Proin eu sem eget orci convallis lobortis. Proin
id orci luctus, elementum velit eget, pulvinar orci.</p>
<p>Etiam hendrerit ipsum eros, a semper mi fringilla et. Fusce pretium ac lorem in blandit. Nulla facilisi. Nunc orci lectus, cursus eget semper vitae, interdum non turpis. Suspendisse dolor ante, tincidunt eu urna eu, dapibus consectetur dolor. In
in tortor et lorem euismod semper. Nullam gravida turpis vel commodo ullamcorper. Vestibulum rutrum consequat tortor at blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc eget eleifend lectus. Duis
mollis aliquet ipsum eget tempus.</p>
<p>Aliquam viverra neque vitae faucibus posuere. Phasellus facilisis nisl vel risus aliquam commodo. Etiam lacinia laoreet sagittis. Mauris dignissim odio sed diam tempor, dapibus condimentum massa cursus. Integer ut nibh commodo, congue tortor vel,
imperdiet ex. Morbi quis elementum metus, nec consequat purus. Praesent rutrum efficitur tempus. Phasellus hendrerit luctus magna in vehicula. Vestibulum dictum magna nisi, at lacinia lorem vestibulum et.</p>
<p>Aliquam erat volutpat. Phasellus at eleifend ligula. Nam sed placerat nisl, a pulvinar ante. Mauris ac laoreet ante. Aliquam pellentesque leo tortor, sed tempor massa egestas quis. Fusce dictum non turpis sed scelerisque. Nunc tristique nisl ac
ante tristique venenatis. Quisque quis felis rhoncus, porttitor enim sit amet, facilisis quam. Curabitur non erat ac ante faucibus lobortis eget at lorem. Maecenas eget tempus sapien. Curabitur eu luctus nulla, eu luctus ex. Vestibulum sodales
enim enim, sit amet tempor ligula laoreet at. Etiam est arcu, elementum et sodales non, tincidunt et sapien. Fusce vitae molestie mi, a bibendum felis. Sed nunc mauris, faucibus vel rutrum ut, lacinia sit amet neque.</p>
<p>Curabitur blandit lacus ut erat cursus luctus quis blandit ex. Duis eget fringilla risus, et egestas ligula. Pellentesque ligula ante, vulputate in faucibus et, efficitur sed mauris. Aliquam at pretium est, nec tempor mauris. Ut pharetra eget neque
non dapibus. Suspendisse potenti. Nulla blandit tellus vel massa elementum, vel consectetur ligula maximus. Vestibulum rutrum magna sit amet dictum mattis. Morbi varius lacus ac imperdiet fringilla. Suspendisse molestie nibh vitae gravida sollicitudin.
Suspendisse tempor finibus felis, eu sagittis lorem.</p>
<p>Sed sodales ultrices facilisis. Phasellus vel massa id neque convallis volutpat vitae sed turpis. Sed ac massa dolor. Sed facilisis nulla suscipit commodo venenatis. In bibendum consectetur rutrum. Duis dapibus, risus sit amet semper pharetra, erat
dui blandit erat, sit amet rutrum ante est nec enim. Pellentesque lobortis ligula sed fringilla dictum. Proin rhoncus, lacus in facilisis pharetra, lorem leo facilisis metus, ac ornare diam risus sed ipsum. Nullam mattis enim nec odio porttitor
fermentum vel vel mi. Aliquam lacinia consectetur interdum.</p>
</main>
<footer class="mdl-mini-footer" style="padding:8px 16px;">
<div class="mdl-mini-footer__right-section">
<ul class="mdl-mini-footer__link-list">
<li>
<img alt="GitHub" height="32" src="https://raw.githubusercontent.com/CAD97/SO-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/github-32x32.png">
</li>
<li>
<img alt="YouTube" height="32" src="https://raw.githubusercontent.com/CAD97/SO-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/youtube-45x32.png">
</li>
<li>
<img alt="Twitter" height="32" src="https://raw.githubusercontent.com/CAD97/SO-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/twitter-39x32.png">
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Garbee's answer does not fix the problem if the main content within mdl-layout_content is not long enough to scroll : the mdl-mini-footer will not be at the bottom of the page.
To ensure that the mdl-mini-footer will stick the bottom of you page even if you do not have content (for exemple if you have dynamical content) make sure to put the footer in another main element :
<body class="mdl-base">
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content">
//Your content here
</main>
<main>
<footer class="mdl-mini-footer footer">
// Your footer here
</footer>
</main>
</div>
</body>
you have used display: flex; on .mdl-mini-footer which is creating problem remove it and height will be ok
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
For example I have a Contact Me clickable header and the information I want for people to see is at the bottom of my page. So I want it to directly scroll down when they click "Contact Me"
With just plain HTML:
<a href='#anchor'>Contact Me</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id='anchor'>Contact info</div>
Wrap your contact me with anchor tag linking it to the div id like so: Contact I included some live code below, as well. Hope this helps!
<nav>
<ul>
<li>Contact</li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a ex a dui bibendum rutrum sed vitae lorem. Cras lacinia eros vel facilisis faucibus. Donec molestie dolor vel congue fringilla. Vestibulum elit tellus, dapibus ut enim eu, gravida ultricies mi. Maecenas nec ornare nibh, vitae luctus risus. Aenean sit amet nisl convallis, lacinia nisi sed, convallis ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget mollis leo. Maecenas ultricies efficitur nisi sed cursus. Etiam nec malesuada est, vitae consectetur massa.
Suspendisse potenti. In sed lacinia neque, id tincidunt elit. Aenean a leo sit amet velit fringilla faucibus a id dolor. Integer nec vehicula ante, ut ultricies risus. Donec nibh purus, feugiat sed nisl vel, iaculis feugiat magna. Morbi neque augue, condimentum vitae sapien sed, rhoncus pulvinar diam. Praesent vestibulum libero purus, quis malesuada sapien convallis at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pharetra mi et pellentesque scelerisque. Mauris vel sapien sed augue rhoncus eleifend tristique ac metus. Proin ac vehicula metus. In hac habitasse platea dictumst. Sed ac tortor vel metus accumsan semper a vitae dui. Sed in eleifend erat, id dictum mauris. Vestibulum ac diam id eros venenatis iaculis.
Suspendisse pharetra pellentesque leo eget hendrerit. Integer et urna posuere, egestas nisi sollicitudin, mattis neque. Nulla lacinia ut mauris et aliquam. In hac habitasse platea dictumst. Morbi in eros commodo, imperdiet urna a, interdum tortor. Donec sagittis, lacus sed tincidunt porttitor, tellus lectus consectetur tortor, eu malesuada urna enim at nulla. Etiam sed tellus ut ex accumsan maximus vitae sit amet ex.
Morbi et eleifend eros, in mattis nisi. Nunc molestie finibus porttitor. Aenean tincidunt, odio vitae feugiat interdum, nibh massa vestibulum nisl, a blandit tortor ante ut quam. Donec condimentum, lacus mattis condimentum feugiat, diam orci blandit justo, quis hendrerit ligula nisl vel urna. Nunc tincidunt orci vel eros vehicula dignissim. In egestas id lacus et dictum. Nulla eros massa, tempus porttitor libero et, posuere consequat quam. Fusce rutrum tincidunt velit, aliquam pharetra ipsum volutpat vitae. Duis ultricies ut metus a convallis. Aliquam quis vehicula neque. Donec mattis sem sed massa rhoncus placerat. Pellentesque sollicitudin aliquet sapien in sollicitudin.
Suspendisse varius tempor accumsan. Sed in libero sed erat convallis ultrices. Vestibulum at congue arcu. Maecenas imperdiet ultricies dui, at faucibus lacus tempus et. Maecenas fringilla ultrices interdum. Nullam laoreet dignissim massa vitae dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper arcu in dui pretium malesuada. Aenean euismod malesuada vestibulum. Donec mattis, sem at rhoncus egestas, quam arcu sagittis sapien, nec maximus ante quam eget mauris. Quisque eleifend non lorem et venenatis. Aliquam erat volutpat. Duis tincidunt nunc turpis, in ullamcorper leo imperdiet eget. In vulputate massa faucibus, efficitur enim luctus, tempor mauris. Suspendisse sed condimentum est, sed lobortis leo. Aenean rutrum nibh malesuada ligula mollis, ut vulputate diam vestibulum.
Donec dapibus neque in velit scelerisque, eget semper orci fringilla. Donec at diam quam. Fusce in enim diam. Vivamus id facilisis ligula. Curabitur sed auctor purus. Vestibulum id nibh et odio varius varius eu vel quam. Donec et malesuada libero. Quisque in velit felis. In sed ipsum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi luctus ex quis sollicitudin dignissim. Aenean tincidunt tristique libero, vitae rhoncus elit eleifend eget. Sed venenatis gravida enim ac fringilla. In blandit nunc non sapien eleifend convallis. Donec a lacinia nisl, et consequat metus.
Donec facilisis, turpis id condimentum sollicitudin, magna justo varius est, auctor suscipit enim arcu at nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus enim, euismod non ultrices at, egestas et magna. Donec laoreet feugiat elit ut porttitor. Pellentesque facilisis bibendum ornare. Cras diam lorem, maximus id nulla at, feugiat sollicitudin felis. Curabitur nisi erat, tincidunt sed semper a, porta non justo.
Duis non dictum purus. Vivamus lobortis enim ut urna ornare, eget pharetra ipsum pretium. Donec mauris nisi, porta non porttitor vehicula, vehicula non orci. Maecenas elementum venenatis interdum. Integer est metus, lobortis id rhoncus in, fringilla nec erat. Vestibulum aliquet mi sit amet odio ultricies mollis. Ut lobortis sapien ac feugiat facilisis. Morbi tellus metus, vulputate facilisis sem quis, gravida auctor dolor. Aliquam nec dictum eros. Suspendisse at laoreet sem. Vestibulum pharetra mauris sapien, id sagittis magna fermentum ac.
Cras congue pulvinar elementum. Phasellus volutpat nibh consequat, finibus nunc eget, laoreet ligula. Phasellus vel tincidunt ante. Maecenas egestas, risus a accumsan facilisis, mi sem ultricies massa, sit amet dignissim sem magna non leo. Vivamus urna libero, aliquet id tortor quis, lobortis laoreet ex. Pellentesque et ligula quis mauris venenatis rutrum. Nullam ultrices, ex vel porttitor congue, magna libero aliquam ipsum, rutrum tristique velit augue vitae augue. Fusce id risus sed odio volutpat posuere. Nam eget dictum urna, quis ullamcorper orci.
Donec imperdiet risus nunc, a fermentum tellus porttitor ut. Nulla laoreet orci ac mollis rutrum. Morbi ut libero ex. Vestibulum faucibus magna ultrices felis iaculis, vel interdum lorem mattis. Phasellus mauris leo, interdum ac ultricies et, pulvinar pretium eros. Morbi ac placerat sem. Maecenas suscipit molestie massa, at porta mauris aliquet sit amet. In hac habitasse platea dictumst. Morbi ullamcorper, velit vel ornare porta, felis lectus elementum massa, quis mattis lacus velit congue diam. Mauris ligula velit, auctor id nisi in, tempus ultricies nisl.
</p>
<div id="contact">
<h1>CONTACT US</h1>
</div>
I am trying to hide a footer behind the main body that will show up when the main bodyy is scrolled above the footer.
the problem I have is that when I set teh footers z-index to a negative, it hides the footer nicveley but the links are unclickable
so I have tried to raise the main content z-index up and set the footer z-index to zero but then the footer is visable above the main content
heres some code
#main {
z-index:4;
padding:0px 0px 450px;
border-bottom:1px solid red;
}
#mainBg {
background:red;
}
footer {
padding: 50px 0;
bottom:0;
position:fixed;
z-index:0;
width:100%;
}
<body>
<div id="main">
<div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
</div>
<footer>footer footer
<br/>
<br/>footer footer
<br/>
Google link
<br/>footer footer
<br/>
<br/>footer footer
<br/>
<br/>
</footer>
</body>
I have added a couple of links to js fiddles to show this in action
JSFIDDLE - negative z-index
JSFIDDLE - positive zindex
Add position:relative to main, and then add either padding to the bottom of body or height. You are still under main which is causing this (as stated in comments).
Padding Bottom Solution:
#main {
z-index:4;
padding:0px 0px 450px;
border-bottom:1px solid red;
position: relative;
}
#mainBg {
background:red;
}
footer {
padding: 50px 0;
bottom:0;
position:fixed;
z-index:3;
width:100%;
}
body {
padding-bottom:200px;
}
<body>
<div id="main">
<div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
</div>
<footer>footer footer
<br/>
<br/>footer footer
<br/>
Google link
<br/>footer footer
<br/>
<br/>footer footer
<br/>
<br/>
</footer>
</body>
Height Solution:
#main {
z-index:4;
padding:0px 0px 450px;
border-bottom:1px solid red;
position: relative;
}
#mainBg {
background:red;
}
footer {
padding: 50px 0;
bottom:0;
position:fixed;
z-index:3;
width:100%;
}
body {
height:1500px;
}
<body>
<div id="main">
<div id="mainBg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere, justo eget auctor sagittis, sapien odio rutrum quam, eu feugiat sem lacus lacinia quam. Morbi malesuada porta sapien eu ornare. Pellentesque vel nibh auctor lectus malesuada porttitor. Cras et dui quam. Nunc sollicitudin mi condimentum iaculis rhoncus. Sed tristique mollis sagittis. Fusce bibendum congue augue, nec scelerisque velit egestas viverra. Phasellus a rhoncus leo. In tempor sagittis rhoncus. Ut a risus viverra, ornare lacus non, ornare nisi. Curabitur luctus mauris orci, quis condimentum lacus facilisis a. Nullam cursus, nisl id sagittis feugiat, risus ipsum consequat felis, id luctus erat felis eget velit. Pellentesque vehicula risus at nibh faucibus, in venenatis tellus aliquam. Pellentesque dolor libero, vehicula et magna efficitur, sollicitudin pharetra ipsum. Curabitur tempus et sapien eu facilisis. Phasellus ipsum diam, pellentesque sed felis non, euismod malesuada orci. Nulla rutrum eros in dignissim pretium. Donec et orci leo. Nullam quis luctus massa. Donec rhoncus lacinia cursus. Fusce sed imperdiet ligula. Maecenas fermentum sed velit eget aliquam. Nullam vel ipsum erat. Mauris ultricies feugiat metus, sed scelerisque arcu imperdiet eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porta felis at pharetra maximus. Curabitur efficitur turpis non interdum finibus. Mauris ut consectetur nisl, eget condimentum sem. Integer rutrum, augue vitae faucibus rutrum, metus tellus volutpat quam, in fermentum arcu risus quis libero. Curabitur faucibus pulvinar tempus. Aenean eu ex ullamcorper, ullamcorper enim a, convallis elit. Cras id facilisis turpis. Nunc urna libero, rhoncus eget blandit id, sollicitudin vitae nibh. Nunc sed nibh faucibus, consequat nibh quis, commodo neque. Nullam porttitor est a dui bibendum, non scelerisque nulla imperdiet. Mauris ut suscipit magna. Aenean magna orci, aliquam nec fringilla ut, blandit ac augue. Aliquam aliquet, metus ut congue varius, massa erat dapibus lectus, sit amet blandit libero tortor eget nibh. Nam tincidunt tristique elementum. Vivamus sagittis nec tellus ut sollicitudin. Vivamus nec lobortis nisl. Proin placerat, orci sed interdum efficitur, libero enim tempor nisl, quis iaculis nisl ligula non dolor. Mauris in felis at justo varius posuere. Nam ac lorem ex. Aliquam convallis ac metus ac condimentum. Aliquam ac ex a lacus placerat rutrum sed a eros. Nunc et tellus at enim rutrum volutpat. Praesent egestas ligula at diam convallis, eget posuere diam vulputate. Cras tempus non nibh eu hendrerit. Aenean erat odio, posuere mattis neque nec, gravida tristique velit. Aenean condimentum massa sed dictum viverra. Sed bibendum velit ac felis rhoncus volutpat feugiat ut tellus. Praesent mollis malesuada sapien vel feugiat. Vivamus scelerisque, lacus nec blandit sodales, nibh velit volutpat augue, quis vehicula urna justo ac felis. Aliquam erat volutpat. Sed non purus eget erat vulputate varius ac vel urna. Phasellus ac tempor mauris. Morbi ut ligula tristique, fringilla metus quis, pharetra mauris. Nunc non fringilla dui, non varius sem. Quisque ullamcorper, est vitae rhoncus porttitor, sapien urna semper orci, non aliquam lacus ipsum non sem. Phasellus volutpat nibh nulla, eu auctor lacus suscipit eget.</div>
</div>
<footer>footer footer
<br/>
<br/>footer footer
<br/>
Google link
<br/>footer footer
<br/>
<br/>footer footer
<br/>
<br/>
</footer>
</body>
Your #main includes 450px padding botton so it is just over the footer.
Try to add 450px padding bottom to the body and remove it from #main.