HTML or Bootstrap image page - html

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;

Related

Can I make a scrollable element on the flex box cross axis?

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?

fix a <p> tag at the top of my page while scrolling

While scrolling i'm trying to fix a p tag with my name on it on the top of the page but nothing seems to be working for me.
<div id="page-content-wrapper">
<p class="logo "><b>Mostafa</b> Masri</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<style>.logo {/*position: sticky;*/ top: 60px; /*left: 77px;*/ font size: 21px; text-transform: uppercase opacity: .8; margin: 0; position:absolute; top: 0; right:0; padding:19px;} </style>

Here's a possible solution using position: fixed.
.logo {
position: fixed;
top: 10px;
right: 10px;
font size: 21px;
text-transform: uppercase;
opacity: .8;
margin: 0;
padding: 19px;
}
<div id="page-content-wrapper">
<p class="logo ">
<b>Mostafa</b> Masri
</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">≡</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at augue quis nulla iaculis tempus. Nunc ornare tempor justo ac pretium. Fusce lobortis tortor nunc, egestas aliquet sem congue eget. Nullam sed porttitor tortor, at suscipit nunc. Sed eget
diam sed lectus varius convallis. Sed interdum semper auctor. Nam vel nisi nisi. Etiam sem lacus, gravida sit amet odio sit amet, convallis pellentesque velit.</p>
<p>Aliquam pulvinar eu magna nec rhoncus. Nulla vel felis nec nisi faucibus varius sit amet in velit. Integer posuere eleifend metus, ac placerat erat elementum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum diam libero, rhoncus
at pretium a, ultrices eu mauris. Pellentesque blandit pretium mi eget lacinia. Nullam erat est, congue ultrices viverra eget, iaculis sit amet velit. Ut tempus lacinia ante, non venenatis leo. Fusce quis ipsum maximus, mattis felis at, feugiat lacus.
Morbi condimentum semper mi ac porttitor. Maecenas aliquam auctor mi, nec accumsan mauris congue a. Praesent rutrum porta sapien in scelerisque. Cras vehicula, tortor non hendrerit dictum, ex justo lacinia nulla, vitae dapibus nibh eros nec mauris.
Nulla sodales hendrerit odio et efficitur.</p>
<p>Fusce vel tempor elit, quis pharetra enim. Suspendisse potenti. Donec a arcu fermentum, venenatis tortor ac, mollis ante. Nullam vitae quam quis leo tempus iaculis id eget nibh. Maecenas consequat quis ante at lacinia. Donec auctor vel leo ut pretium.
Vestibulum hendrerit, nunc non scelerisque condimentum, dolor urna convallis sem, pulvinar vestibulum elit ante eget quam. Nunc pretium, lectus vel tincidunt lacinia, massa neque posuere felis, non tristique ipsum ante vitae dui. Mauris vitae nulla
quis mi congue eleifend non eu libero. Maecenas sit amet felis eu urna aliquam efficitur et congue nisi. Praesent sagittis nisi porttitor velit consequat, in feugiat quam ultrices. Cras sit amet enim ante. Fusce mi urna, volutpat semper justo ut,
feugiat mattis elit. Sed quis volutpat justo. Fusce pretium venenatis massa a aliquam.</p>
<p>Sed eu ultrices felis, et luctus metus. Donec justo felis, congue eget dui nec, commodo porttitor felis. Sed eu dui et risus condimentum rhoncus. Sed interdum libero ac risus convallis, sed placerat tortor interdum. Phasellus nec tristique eros, a ullamcorper
ex. Aliquam nulla nunc, placerat et urna vitae, eleifend condimentum arcu. Nullam diam arcu, dignissim eu lacus ac, porta pulvinar arcu. Sed ultrices luctus leo, ac blandit mi pellentesque a. Nunc ornare, arcu consectetur bibendum hendrerit, nulla
diam finibus est, non porta ligula erat vitae velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sodales arcu a lacus luctus, non mollis neque placerat. Praesent lacinia nisl id lectus feugiat condimentum.
Vivamus convallis aliquam est vel sagittis. Etiam ullamcorper consequat sapien, ornare porttitor massa luctus non. Ut purus tellus, maximus eu iaculis a, porta ac mi.</p>
<p>Praesent suscipit risus vitae magna aliquet, sed egestas ipsum eleifend. Suspendisse tincidunt dolor at est rhoncus mollis. In convallis iaculis diam id finibus. Integer et mi blandit, imperdiet arcu in, accumsan velit. Pellentesque vitae tristique
odio. Pellentesque facilisis dolor at suscipit ultrices. In hac habitasse platea dictumst. Sed molestie ante quis rutrum vestibulum. Phasellus interdum eros ut sem porta, non facilisis velit fringilla.</p>
</div>

footer height is too small in Chrome

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

How do you have a clickable header bring you down the same page you're on to a new section [closed]

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>

hiding a footer below the main body using zindex

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.