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>
I'm trying to achieve a layout with HTML/CSS that has a header with no set height, and a sidebar and content area next to each other below the header that take up the remaining height of the screen. In addition, the sidebar often has so many links that the links scroll off the screen, but instead of that happening, I would like to add a vertical scrollbar to just the sidebar section, and not have there be a scrollbar for the entire page.
I've been trying everything I can think of and find online, but nothing seems to be working. Here's some basic HTML/CSS to demonstrate the layout and the problem:
<!DOCTYPE html>
<html>
<head>
<style>
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow-y: scroll;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
Does anyone have any good ideas and/or know how to solve this problem? Thank you.
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
height:100vh;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
height:1px ;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow: auto;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
overflow :auto ;
}
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper porta ante, sit amet euismod ipsum venenatis vitae. Mauris ut tristique nibh, a ultricies nulla. Nullam fermentum eu mi ac cursus. Integer semper suscipit ex eu mattis. Phasellus iaculis ultricies ornare. Suspendisse ut nisi diam. Nunc pellentesque lacinia turpis vehicula pharetra. Aenean aliquam cursus elit nec fermentum. Morbi sed tempor nunc. In efficitur arcu ut finibus ultricies.
Suspendisse cursus semper semper. Praesent elit metus, venenatis vitae dictum eu, viverra ut tellus. Vestibulum ornare dui sit amet enim consectetur ornare. Cras porttitor nisl ultrices erat laoreet, ut ultricies quam condimentum. Duis a magna quis mi consequat facilisis id id dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer suscipit odio nibh, quis fermentum tellus hendrerit et.
Nam et euismod eros, id porttitor velit. Ut eget porttitor nibh, non interdum magna. Donec facilisis quis orci pharetra semper. Curabitur hendrerit massa interdum lacinia cursus. Aenean rutrum, lectus non efficitur sodales, sem lacus volutpat lectus, sed pharetra nisl metus in tortor. Integer eu turpis turpis. Phasellus eu placerat metus. Aenean ac massa consequat, consequat erat non, sollicitudin mi. Vivamus porttitor mattis accumsan.
Duis justo elit, finibus quis hendrerit at, ultricies quis nulla. Donec lobortis orci libero, eget dictum ipsum cursus ut. Phasellus vitae pellentesque risus. Mauris et dictum eros. Donec consectetur erat odio, nec semper nibh lacinia ac. Vestibulum rutrum laoreet rhoncus. Fusce dictum ut dui a fermentum. Donec hendrerit volutpat elit non ornare. Curabitur at neque semper, blandit lorem et, varius eros. Suspendisse nec turpis nec diam gravida pharetra.
Morbi turpis nulla, feugiat et egestas in, tempor sit amet ipsum. Nam ac arcu aliquet, congue ipsum ut, lacinia velit. Nulla neque nulla, vulputate in ex nec, laoreet gravida enim. Sed finibus turpis quis dapibus tincidunt. Phasellus elementum tincidunt neque sed porta. Etiam non finibus libero, vitae ullamcorper erat. Nullam lobortis eget diam eget vestibulum. In non dolor sed mauris finibus tempus non et justo. Nam convallis nec elit quis tempor. Vivamus ultricies pellentesque lectus nec commodo. Sed et molestie lacus, non gravida enim. Vivamus feugiat tempus ipsum ac eleifend. Nulla id mi tempor, tincidunt justo fermentum, convallis orci.
Fusce finibus placerat sapien at luctus. Mauris non velit diam. Vestibulum vel porta tellus, aliquet vulputate mi. Aenean a turpis ac urna gravida porta et sit amet ante. Phasellus vehicula feugiat leo ut faucibus. Curabitur porta, leo id auctor viverra, lorem nulla maximus turpis, eu laoreet leo risus id urna. Nullam finibus lectus ante, eget ultrices velit tempor ut. Maecenas quis tincidunt tortor. Nam eu facilisis libero. Morbi fermentum dolor sit amet lorem dictum aliquet. Curabitur porta nisl sed velit facilisis rhoncus. Duis eu eros quis metus blandit efficitur. Aenean venenatis est ante. Vestibulum quis laoreet dolor, sed bibendum metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras feugiat, dui vel lacinia scelerisque, lacus urna tempor quam, sit amet iaculis diam nulla et felis.
Curabitur ac accumsan arcu. Donec at euismod nisi, sit amet interdum sapien. Phasellus efficitur, felis ut condimentum accumsan, tortor ipsum convallis massa, ac iaculis quam metus quis nulla. Fusce vel turpis porta, tempor ex non, eleifend ante. Etiam nibh erat, interdum eget commodo nec, interdum eu orci. Vivamus eleifend nunc sed neque cursus pretium. Vestibulum non nisl eros. Fusce cursus tristique eros a finibus. Mauris vel massa tempor, vestibulum lorem in, bibendum urna. Donec cursus dolor nunc, sed lobortis tellus scelerisque ut. Nunc venenatis tincidunt neque eu gravida. Vestibulum quis ante eu velit interdum vulputate.
Vivamus sit amet mollis justo. Quisque sit amet molestie libero. Nam ut tempor dui, a commodo tortor. Quisque vehicula congue maximus. Proin dignissim ante nisl, eget ullamcorper lorem vestibulum sed. Vestibulum commodo porttitor vulputate. Sed augue ante, hendrerit et tincidunt maximus, pretium et tellus. Morbi et tortor eu nisl dignissim pulvinar. Morbi dignissim dictum metus vel lobortis. In sit amet tellus sit amet dui auctor tincidunt ac in nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id metus lacinia, cursus ex in, gravida nibh. Ut mollis mi at urna gravida, in sagittis sem dictum. Nullam pretium dolor mauris, eget lobortis libero euismod a. Maecenas aliquet dolor dolor, cursus malesuada erat ornare ac.
Pellentesque ultrices semper tortor non fermentum. Fusce pellentesque fermentum justo eu placerat. Donec tincidunt dolor id nunc vehicula mattis. Suspendisse fermentum libero vel est sollicitudin, non interdum urna placerat. Cras dignissim nibh id tincidunt pellentesque. Quisque ac cursus enim. Phasellus pretium varius aliquam. Mauris arcu enim, posuere sit amet est eu, vestibulum euismod sapien. Etiam sed velit consequat, dictum turpis eu, vehicula orci. Morbi tincidunt sit amet erat in mattis. Curabitur ac nisi sit amet ipsum ultrices tempus vel et est. Vivamus ornare dolor vel ligula ultrices tempor.
Nunc id ultrices sapien. In hac habitasse platea dictumst. Quisque tempus cursus tellus, quis ultricies neque commodo ut. Integer bibendum orci vitae metus fringilla, quis tristique dui iaculis. Vestibulum eu velit et leo facilisis rhoncus sit amet at tortor. Morbi dignissim ante ut neque lacinia dictum. In vel risus at ex lobortis laoreet et nec leo. Mauris rutrum orci sollicitudin ex rhoncus ultrices.
Nunc dapibus pulvinar ex sed sollicitudin. Donec nec luctus tortor. Phasellus porta, ipsum sit amet sagittis sagittis, lectus sem vestibulum enim, et placerat velit diam sit amet leo. Curabitur turpis mi, eleifend eu porttitor mattis, aliquam sed ipsum. Pellentesque gravida condimentum sem, id laoreet erat vulputate in. Nulla facilisi. Mauris in eros vel sapien accumsan viverra eget sed est. Ut arcu orci, accumsan faucibus ipsum ut, accumsan luctus eros. Proin eget dui aliquam, dictum elit in, malesuada odio. Sed non arcu molestie, dignissim odio ut, sagittis neque. Duis sit amet quam massa. Mauris tempor, eros a placerat ornare, odio dui dapibus orci, quis feugiat libero neque posuere quam. Sed gravida velit purus, ut laoreet tortor mollis sit amet. Aliquam rutrum non lorem nec interdum. Pellentesque ornare blandit mattis.
Aliquam non commodo felis. Maecenas scelerisque elementum arcu, at tincidunt elit fringilla et. Nam ut felis dapibus elit accumsan sollicitudin id at ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque tincidunt mi interdum dui porta, ut tristique nibh auctor. Vestibulum in aliquam quam. Ut suscipit fringilla tellus, et elementum ligula finibus id. Curabitur auctor tincidunt finibus.
Donec sit amet orci pharetra, tempor orci in, placerat felis. Cras aliquam augue a lacus molestie, efficitur ultrices odio porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend arcu quis eros ultricies lobortis. Curabitur dignissim mi id feugiat finibus. In eu sodales sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Sed nec auctor velit. Vivamus pellentesque eget risus eu luctus. Etiam ac odio vitae quam semper vulputate quis non nulla. Pellentesque eget luctus turpis, quis volutpat tellus. Sed commodo accumsan magna ut dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut congue, magna id sagittis cursus, neque risus ultricies libero, et posuere est est ac mi. Donec quam urna, lobortis nec nibh convallis, auctor vehicula augue. Vestibulum turpis massa, placerat ut felis sit amet, maximus malesuada turpis. Integer scelerisque nisl sagittis, tempor quam vitae, feugiat tellus.
Phasellus efficitur, risus eget suscipit rhoncus, enim enim tempor elit, id tempor nibh metus vel elit. Suspendisse mattis lacinia sollicitudin. In urna dolor, eleifend a cursus ac, varius a lectus. Phasellus vestibulum, libero id congue venenatis, risus leo fringilla odio, ac dapibus augue enim vestibulum mauris. Nulla sit amet dignissim sem. Sed convallis eros non neque laoreet mollis. Sed at ex ligula. Vivamus luctus, urna nec fringilla faucibus, nisl est accumsan quam, eget gravida nisl odio at sem. In lacinia, diam ut faucibus pellentesque, mi ligula elementum est, et porta mauris tellus sit amet eros.
Donec luctus quis dui vel ornare. Vestibulum feugiat enim et semper tempor. Nullam dictum pellentesque orci. Aenean eleifend dolor at condimentum tincidunt. Sed molestie felis vel ipsum ullamcorper vulputate. Donec vel urna ac mi consectetur imperdiet eget eu arcu. Curabitur elit ante, sollicitudin vel convallis sed, molestie id justo. Vivamus lacinia risus eu mi suscipit gravida. Ut vitae ex pulvinar, rhoncus erat non, efficitur purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec est velit, ultricies a lacinia sed, faucibus ut erat. Nullam ut mi tincidunt, porttitor lacus sed, euismod velit. Nunc scelerisque lacus a lectus eleifend, tempus mollis urna rutrum.
Nam eget lobortis nisl. Pellentesque sed venenatis elit. In auctor volutpat posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut cursus nunc augue, ac egestas tellus iaculis eu. Vivamus ultrices cursus mauris, ac bibendum eros accumsan eu. Aliquam id tincidunt purus. Sed sodales consectetur odio porttitor pulvinar. Donec sodales mattis sem, id elementum leo ornare at. Aenean blandit id magna a placerat.
Suspendisse quis tincidunt leo. Maecenas sapien massa, consequat at pharetra et, sodales vel velit. Ut convallis volutpat nibh id eleifend. Vestibulum molestie mauris ac ornare fringilla. Aliquam ipsum felis, fermentum eu lacinia nec, faucibus at nunc. Donec imperdiet, turpis non consectetur sodales, orci dolor ultricies magna, quis porttitor massa ligula ultrices magna. Vivamus auctor neque eros, nec dictum nulla vestibulum non. Pellentesque luctus, urna nec imperdiet maximus, nisi nibh suscipit ipsum, eget luctus leo ex quis lorem. Praesent in ex vitae urna laoreet imperdiet. Phasellus pulvinar ipsum vitae dui ultrices suscipit. Aenean est ipsum, ornare eget porta sit amet, tincidunt sed dui. Nam et urna porttitor, tempor magna ac, semper nisi. Vestibulum nisl purus, laoreet non ex a, ultricies finibus dolor.
Maecenas id sapien semper, luctus ante in, aliquet mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio magna. Aliquam pulvinar euismod ligula eu imperdiet. Integer condimentum nulla magna, feugiat ullamcorper ipsum dictum ac. Suspendisse id tempor neque, vitae blandit urna. Fusce eget tempus erat. Sed sit amet elit vitae nisl maximus dictum eget et nisl. In egestas at leo sed lacinia. Pellentesque at hendrerit neque, quis pharetra nunc. Donec dignissim erat in libero porttitor cursus.
Maecenas pellentesque tempus dapibus. Aenean sodales interdum dolor, sed iaculis erat luctus ac. Morbi interdum feugiat nisi, sed eleifend quam vehicula a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed malesuada arcu sed lectus placerat, eget blandit purus luctus. Cras tristique ligula neque. Vestibulum finibus nunc ac ex ultricies, eget aliquam leo iaculis. Duis vestibulum imperdiet eros in vulputate. In ex odio, dictum aliquet dui at, elementum ultricies justo. Ut pulvinar condimentum dui, tincidunt faucibus nunc tempor at.
Quisque eleifend diam a lorem euismod, vitae dictum eros euismod. Pellentesque sed vehicula ante, ut laoreet libero. Suspendisse eget massa sollicitudin tortor viverra ultrices id vitae lorem. Donec sagittis nunc ut hendrerit lacinia. Donec elementum tellus efficitur felis cursus mollis. Etiam quis erat massa. Nullam eu dui felis. Suspendisse pulvinar leo augue, vel fermentum ex feugiat sed.
Morbi sagittis fermentum massa, vitae dictum orci. Aliquam fringilla, elit at condimentum congue, lacus libero porttitor urna, vel efficitur ante ante pulvinar risus. Aenean non enim nulla. Nullam eget elit ut lorem tincidunt malesuada. Curabitur dapibus eros molestie felis commodo tristique. Quisque non mi in nunc ultrices malesuada at ut dolor. Nullam metus mauris, aliquam id accumsan ac, efficitur ut felis. Ut purus lacus, consectetur quis dolor a, sagittis luctus est. Praesent tristique interdum sapien ut scelerisque. Proin nisi sem, luctus eu massa vitae, tincidunt tristique urna. Phasellus a nibh ut magna pretium convallis eget non justo. Ut id arcu sit amet nisi sollicitudin convallis sed sed dolor. Proin fermentum non ex et volutpat. Donec vitae erat rutrum, laoreet dui at, egestas arcu.
Etiam lobortis sodales mollis. Maecenas nec neque malesuada est ullamcorper venenatis eget ut lacus. Suspendisse maximus pretium tincidunt. Etiam a auctor mi. Morbi sollicitudin metus nec dolor porttitor, ac placerat arcu tempus. Sed turpis mi, cursus sit amet egestas ac, consequat sit amet nulla. Suspendisse dapibus malesuada blandit. Donec aliquet ligula urna, vel venenatis nibh facilisis sed.
Fusce volutpat ex et leo sagittis, eu posuere sapien scelerisque. Proin eget nisi sed metus accumsan suscipit in id leo. Quisque ac rutrum velit. Nulla id convallis libero. Duis euismod feugiat sodales. Aenean placerat, est nec convallis luctus, massa leo finibus nunc, in viverra dolor nunc at arcu. Cras lobortis rutrum vestibulum. Integer pellentesque placerat sapien non mattis. Maecenas in velit mi. Cras finibus in felis nec ullamcorper. Aenean ut est et felis elementum efficitur at vitae lacus. Maecenas aliquam dapibus massa, et semper lacus vulputate et.
In imperdiet convallis tellus ut semper. Quisque placerat eros id condimentum faucibus. Nulla et faucibus elit. Nunc tincidunt risus eget velit cursus semper. Etiam viverra nibh eget turpis gravida ultrices. Cras eget iaculis tortor, vehicula consequat est. Pellentesque blandit nisl id neque ultrices, in tempus quam facilisis.
Aenean feugiat felis sed ligula tincidunt suscipit a elementum dui. Phasellus laoreet lorem sit amet nisi varius, sit amet tincidunt augue dictum. Ut dictum ipsum finibus, pellentesque odio vel, accumsan odio. Proin porttitor risus lectus, commodo tristique diam commodo et. Integer ornare vel dui sit amet placerat. Quisque tellus purus, pharetra eget mi sit amet, faucibus imperdiet dui. Aliquam malesuada sapien eu enim laoreet, nec blandit lacus pulvinar. Ut in diam condimentum, iaculis mauris eget, venenatis ipsum. Donec finibus diam arcu, sit amet laoreet leo consectetur in. Duis erat turpis, consequat sed ornare sit amet, feugiat ac purus. Aliquam erat volutpat. Duis elit lacus, commodo id leo sed, congue consequat lectus.
Mauris facilisis et ligula id faucibus. Nunc non lobortis metus, tristique finibus tortor. Fusce interdum interdum felis elementum dignissim. Vivamus diam nisi, dictum dapibus consectetur ut, laoreet vel est. Vivamus posuere consectetur dui, in vehicula felis interdum nec. Pellentesque tincidunt magna turpis, a vehicula ante pellentesque sit amet. Nullam id feugiat nisl, eu blandit felis.
Suspendisse consequat enim at enim sagittis, sed feugiat tellus iaculis. Vestibulum volutpat dignissim porttitor. Vivamus at ante nec augue tempus laoreet. In volutpat risus at ipsum gravida tempus. Sed et vulputate dui. Praesent eget tempus mauris. Vivamus congue tellus at lacus sollicitudin luctus vitae quis est. Vivamus interdum nisi ut neque mattis, a suscipit lacus tempor. Vestibulum tellus orci, scelerisque sodales metus eu, cursus aliquam elit. Nunc porta fringilla turpis, ac varius arcu blandit ac. Nulla ornare ligula non tortor hendrerit dictum.
Aliquam lobortis, lectus sit amet blandit pulvinar, risus quam condimentum diam, convallis tristique lacus est non mi. Sed eu felis purus. Sed velit justo, posuere eget porttitor eget, vehicula vel neque. Suspendisse malesuada, nunc nec auctor cursus, lorem dolor rutrum dolor, ut scelerisque nibh nisi sed justo. Nullam ac orci non nisl varius porttitor. Vestibulum non lorem at mauris malesuada interdum vel quis dolor. Pellentesque porttitor erat vel sem venenatis feugiat eget vitae nisi. Sed tempus urna vitae egestas consequat. Curabitur vitae porttitor erat. In augue sem, sodales eget velit ut, pulvinar consectetur sem. Mauris rutrum erat vitae placerat egestas. Ut est odio, semper ut augue et, luctus sagittis risus. Curabitur ex est, ultrices nec neque consequat, dapibus malesuada magna. Aliquam erat volutpat. Vestibulum ipsum turpis, ultricies vitae tortor nec, malesuada sagittis orci.
Cras consequat mi odio. Proin vestibulum vestibulum efficitur. Ut et neque sapien. In sit amet ipsum in sapien molestie auctor ut eu diam. Aenean ornare erat ut felis faucibus, quis laoreet dui pretium. Praesent porttitor imperdiet mauris, eget consequat lectus lacinia a. Nam maximus eleifend velit, ut ultrices orci finibus nec. Donec id sapien ut erat fermentum vulputate in vel risus. Fusce neque ante, semper at euismod in, mollis sit amet neque. Fusce gravida pretium sapien, a eleifend nisi euismod sit amet. Vestibulum vulputate dapibus dolor non tempor. Proin eros velit, ornare vel ultrices non, faucibus at diam. Praesent pretium tempor arcu. Cras semper pellentesque commodo. Cras nec urna in tortor molestie varius in vitae odio. Ut finibus lacus ut est tristique suscipit.
Donec interdum magna urna, vel posuere nisi pellentesque sed. Nam quis mi sit amet quam laoreet eleifend. Aenean quis tellus non nulla auctor fringilla. Nunc felis arcu, volutpat quis porta vel, molestie at massa. Morbi vitae enim urna. Etiam euismod facilisis leo, vel dignissim nisi tempus sit amet. Aliquam aliquam cursus nibh, faucibus pharetra quam.
Maecenas luctus, velit ac malesuada egestas, leo nunc elementum neque, at porttitor ligula augue in odio. Sed tempus egestas dui, vitae varius metus volutpat id. Aliquam ornare, lacus posuere sollicitudin vehicula, felis diam consequat arcu, a laoreet nulla erat non nisl. Proin cursus ut tellus at condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin finibus enim et faucibus dignissim. Donec non ex vulputate, interdum orci ut, dignissim urna. Nulla rhoncus sollicitudin congue. Mauris semper arcu a massa malesuada scelerisque. Quisque ligula metus, condimentum nec interdum eget, efficitur in nunc.
Phasellus vel luctus dui, quis ornare orci. Etiam sollicitudin, neque at venenatis luctus, felis ante accumsan velit, nec molestie erat risus vel odio. In interdum maximus enim lobortis laoreet. Vivamus nisi odio, suscipit sit amet dui vel, consectetur mattis velit. Ut scelerisque sem eget tortor hendrerit, non bibendum enim rhoncus. Aenean id sem feugiat, eleifend leo nec, volutpat diam. Phasellus eget semper elit. Suspendisse vitae magna a ligula hendrerit malesuada. In magna velit, luctus at eros vitae, dignissim vehicula neque. In quis ex vel risus imperdiet feugiat eu vestibulum lorem. Nullam porttitor enim sed leo ornare, ac posuere tortor molestie. Fusce accumsan rutrum dictum. Aenean in erat neque. Maecenas rhoncus enim id nisl posuere, vel tristique neque vehicula. In efficitur, mauris non semper semper, justo mauris gravida ligula, ac bibendum sem lacus et diam. Nullam gravida sit amet diam et tristique.
Nulla urna justo, condimentum ut rhoncus vel, imperdiet sed mi. Aliquam venenatis, neque et facilisis placerat, dui felis lobortis diam, a pulvinar nibh velit fermentum tortor. Quisque nec commodo nibh, vitae varius elit. Cras sem dolor, fermentum ac dignissim eget, mattis in libero. Vivamus condimentum, diam et consectetur blandit, elit elit faucibus justo, condimentum rhoncus dui mi a ipsum. Aenean sit amet tellus leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eu sodales ipsum. Etiam blandit nibh sit amet nunc interdum viverra. In hac habitasse platea dictumst. Sed eget ligula nec metus vestibulum elementum. Nulla in dolor eget risus laoreet fermentum. Aenean vitae accumsan erat, ac fermentum libero. Fusce efficitur tincidunt nibh, vel fringilla orci consectetur vitae. Ut eget porttitor mi.
</div>
</div>
</div>
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
So I have 2 divs, side by side.
Each div has a different background color.
The first div has very little content.
The second div has a lot of content.
At certain screen resolutions the second div will overflow.
I need the first content to stretch to the height of its neighbor.
I thought flexbox align-items: stretch achieved this, but it doesn't appear to work.
There is a working model here: http://codepen.io/mildrenben/pen/MwxeJv
HTML:
<div class="wrap">
<div class="first">
First div content
</div>
<div class="second">
// A Ton of content
</div>
</div>
CSS:
html,
body {
width: 100%;
min-height: 100%;
}
.wrap {
height: 100%;
display: flex;
align-items: stretch;
}
.first,
.second {
height: 100%;
width: 50%;
}
.first {
background: green;
}
.second {
background: blue;
}
Change the wrap height to min-height...and
.wrap {
min-height: 100%;
display: flex;
align-items: stretch;
}
.first,
.second {
flex:1 ;
}
html,
body {
width: 100%;
min-height: 100%;
}
.wrap {
min-height: 100%;
display: flex;
align-items: stretch;
}
.first,
.second {
flex: 1;
}
.first {
background: green;
}
.second {
background: blue;
}
<div class="wrap">
<div class="first">
First div content
</div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget semper dui. Suspendisse potenti. Sed sit amet arcu ante. Praesent vel commodo mi. Morbi eget diam id mi pellentesque gravida. Integer quis placerat quam. Morbi eu nunc eu neque feugiat
interdum. Etiam est dui, ullamcorper quis accumsan eget, vulputate non odio. Praesent auctor quam vitae enim tincidunt blandit. Nunc fringilla rhoncus dignissim. Pellentesque pellentesque commodo dolor at posuere. Morbi scelerisque ante quis odio
luctus aliquam. In et libero quam. Maecenas tincidunt eu diam at lobortis. Phasellus eu ipsum molestie lectus luctus sodales. Mauris blandit sed ante quis suscipit. Etiam porta dolor dui, a gravida quam tempor quis. Praesent eu varius mi, a vulputate
ipsum. Praesent vestibulum felis a mi auctor fringilla. Integer dignissim vehicula felis, hendrerit tincidunt elit dictum vel. Sed eu vestibulum augue. Nulla facilisi. Donec ut augue velit. Praesent eget auctor mi. Pellentesque vel tempus eros, in
congue sapien. Phasellus egestas pulvinar libero non suscipit. Nam facilisis bibendum ex vel blandit. Vivamus vulputate nibh vel facilisis porttitor. Fusce et blandit augue. Quisque rutrum lorem in sapien dictum, nec viverra magna posuere. Nullam
sodales molestie augue ac volutpat. Proin sit amet gravida nunc. Sed justo sapien, rutrum ut enim non, efficitur finibus lacus. Sed euismod porttitor ex, eu finibus dui dignissim at. Donec mollis risus urna, nec feugiat leo molestie eget. Nam pellentesque
malesuada ante, non vehicula dui pulvinar non. Pellentesque lorem eros, blandit sit amet pretium porta, bibendum nec magna. Nam vel turpis sed massa dictum pulvinar. Cras egestas aliquam tellus, nec pulvinar est laoreet in. Praesent nec nunc et ipsum
condimentum ultrices et aliquam urna. Ut tincidunt aliquam libero. Sed laoreet ultricies tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempus tortor mauris, sed interdum tellus finibus
eu. Suspendisse pulvinar consequat diam, non dapibus odio euismod a. Nulla leo ante, pulvinar quis iaculis a, efficitur ut sapien. Fusce vitae egestas libero. Praesent vel turpis ut erat lobortis auctor laoreet vitae diam. In scelerisque est ac imperdiet
ullamcorper. Sed sem elit, luctus ac dui non, facilisis fermentum est. Ut ac nisi non massa faucibus dictum non finibus eros. Donec finibus nibh et pretium lobortis. Pellentesque placerat tincidunt vulputate. Aliquam feugiat porta ipsum, ut fringilla
neque placerat id. Cras auctor elit at enim aliquet consectetur. Pellentesque mollis neque justo, ut porttitor libero tristique dapibus. Donec sed dolor orci. Nunc ultrices feugiat velit non scelerisque. Sed et urna non sem efficitur scelerisque eget
sit amet arcu. Cras hendrerit egestas est, in pretium ante tempor id. Nam eleifend, diam ac hendrerit molestie, eros tellus vulputate ante, sed facilisis orci massa vel leo. Ut lacinia justo sit amet ex sagittis eleifend. Etiam suscipit eget metus
ac ornare. Etiam egestas, ex nec pretium accumsan, metus erat lobortis lacus, et laoreet tortor mauris ac ante. Vestibulum arcu odio, tristique eu tristique non, dictum ac lacus. Maecenas nec dignissim felis. Fusce elit dolor, interdum in semper ac,
interdum ullamcorper ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin nec neque magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean et nunc commodo, gravida magna id, iaculis massa.
Sed viverra ornare euismod. Nunc et massa non neque condimentum sodales. Vivamus maximus porta felis, sed tristique tellus auctor quis. Maecenas ipsum risus, luctus eget arcu eu, dapibus tempor dolor. Proin hendrerit, dolor vel facilisis faucibus,
turpis nisi lacinia urna, ullamcorper vulputate diam nulla congue dolor. Vivamus sodales leo non aliquam imperdiet. Mauris ut sapien facilisis, pretium mi quis, malesuada felis. Proin ac sagittis enim. Aliquam et nisi in erat rutrum varius eget eget
sapien. Phasellus eget justo at sapien porttitor elementum. Phasellus eget mauris odio. Aliquam erat volutpat. Morbi convallis, ex vitae dapibus mollis, odio justo lobortis augue, et mattis ex libero sit amet tortor. Donec suscipit, odio in aliquet
aliquam, mi tellus dictum orci, sed cursus massa nulla id erat. Suspendisse potenti. Praesent nulla lorem, venenatis ut lacinia ut, hendrerit quis lorem. Vestibulum eget nulla efficitur, lacinia dui sit amet, condimentum arcu. Nam facilisis mauris
vitae turpis ullamcorper sollicitudin. Phasellus feugiat erat a diam viverra, sed fringilla est egestas. Fusce at ex est. Sed rutrum feugiat libero, quis ullamcorper libero imperdiet vel. Mauris efficitur tortor faucibus urna cursus hendrerit. Vivamus
quis posuere leo. Nullam dignissim blandit metus, nec volutpat mi tristique quis. Pellentesque tempus risus eget nibh dapibus fringilla. Suspendisse consectetur, nisi at condimentum venenatis, enim sem rutrum urna, sit amet sollicitudin ex mi semper
urna. Nullam vehicula, augue ac congue mattis, nunc odio feugiat orci, sed porta odio odio mattis augue. Proin semper ut dolor ut fermentum. Pellentesque consequat pellentesque urna quis faucibus. Sed elit turpis, scelerisque in commodo ut, semper
quis augue. Nulla maximus quam et lacus viverra, ut scelerisque diam varius. Phasellus viverra auctor dictum. Praesent vehicula vel arcu in ornare. Sed faucibus, odio et gravida faucibus, diam mauris gravida diam, id bibendum turpis lorem nec odio.
Duis turpis augue, pulvinar et leo non, venenatis lacinia elit. In hac habitasse platea dictumst. Phasellus at iaculis ipsum. Quisque ultrices lacus eu elementum feugiat. In interdum mi ut quam sodales, in iaculis eros euismod. Suspendisse fringilla
enim in sapien luctus, id commodo nisi aliquam. Donec sagittis at dolor ut convallis. Mauris a felis suscipit velit rutrum hendrerit. Vestibulum semper diam metus, nec tempus arcu feugiat in. Proin a nibh eu tellus faucibus dictum eu a enim. Pellentesque
sed tempor turpis, id cursus massa. Suspendisse dolor velit, eleifend ut lacinia id, sodales id arcu. Maecenas id magna ut ligula laoreet faucibus. Vivamus tincidunt nibh id urna pulvinar auctor. Ut quis convallis lacus. Phasellus pellentesque leo
luctus placerat ultricies. Quisque mollis dui lorem, rhoncus pulvinar justo sagittis sed. Aenean et diam id nisi mollis facilisis sit amet ac magna. Maecenas id consequat justo. Nunc laoreet massa et viverra aliquam. Vivamus imperdiet hendrerit vestibulum.
Fusce orci odio, pharetra in imperdiet sed, tempor sed arcu. Ut feugiat massa urna, vitae vestibulum magna tincidunt et. Ut varius volutpat urna vel venenatis. Nullam tempor sapien sed pellentesque sodales. Vivamus luctus turpis erat, eget auctor
metus tincidunt ut. Aenean ut consequat nisl. Donec at tincidunt turpis. Suspendisse sollicitudin, turpis id semper hendrerit, eros urna facilisis tellus, eget mattis ex velit sit amet leo. Donec sollicitudin massa nunc, vehicula efficitur sapien
mollis nec. Nam hendrerit turpis arcu, ut facilisis ipsum vestibulum fringilla. Sed quis rutrum orci, id dictum diam. Ut faucibus mi nulla, at lobortis nisi suscipit at. Nunc at tincidunt arcu, vel commodo lorem. Sed leo ipsum, ultricies vitae fringilla
ac, venenatis non quam. Donec congue tristique massa, sit amet pretium erat ullamcorper convallis. Donec efficitur et enim eu finibus. Fusce consectetur elit turpis, vel tempor felis laoreet quis. Donec semper maximus aliquet. Nullam velit augue,
lobortis ut vehicula vitae, ullamcorper id lacus. In fringilla ullamcorper justo. Sed consectetur, nulla eu scelerisque tincidunt, dolor dui laoreet neque, quis mattis odio enim non ligula. Morbi varius nulla quis nibh vestibulum, vel consequat velit
sollicitudin. Nullam cursus lacus porttitor ligula egestas, et varius velit pharetra. Aliquam vitae nibh et augue lobortis maximus ac at mi. Cras semper eget elit nec tristique. Sed cursus lorem augue, facilisis vestibulum felis pretium eget. Duis
id erat dui. Sed vitae enim quam. Cras vel malesuada nisi. Pellentesque vitae aliquam tellus. Aliquam gravida at ante gravida facilisis. Donec a imperdiet risus, sed eleifend enim. Vestibulum accumsan id nunc et pellentesque. Phasellus maximus enim
ut augue hendrerit pharetra. Cras dictum mauris sollicitudin massa fermentum, sed ultricies elit tempus. Maecenas pellentesque efficitur ligula in fermentum. Donec eleifend lorem et odio lacinia posuere. Etiam varius non tortor id elementum. Etiam
tellus lacus, sagittis dapibus porta quis, porta nec mi. Nam sed massa ipsum. Cras maximus ipsum eget maximus molestie. Integer dictum leo at ex aliquam pretium. Ut sed ullamcorper sem, at suscipit elit. Sed ac massa mollis, elementum sem nec, consequat
mi. Vestibulum sodales magna eget velit imperdiet molestie. Vestibulum tortor odio, egestas id aliquet eu, lacinia eget mi. Vivamus auctor, tortor vel dapibus suscipit, felis sem ullamcorper mi, ac tempus nisl velit sed purus. Sed eget blandit mauris.
</div>
</div>
Codepen Demo
I'm trying to buld header that is white, but on place where logo is transparent i want header to be transparent to so you can see trough logo. Is there any way to make one part of header transparent but all others white? As you can see logo is inside the header its 50x50px and i want that part to be all transparent
header {
width: 100%;
height: 165px;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid black;
background-color: white;
}
.content {
width: 960px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul li {
display: inline;
list-style: none;
}
nav ul li a {
text-decoration: none;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="NKO law firm company logo">
<nav class="main-navigation">
<ul>
<li>THE FIRM
</li>
<li>TEAM
</li>
<li>PRACTICE AREA
</li>
<li>RANKINGS
</li>
<li>CLIENTS
</li>
<li>CONTACTS
</li>
</ul>
</nav>
</div>
</header>
I came up with a bit of a "hacky" solution, using pseudo elements, that allows you to scale the size.
What's happening is that we're not setting a background colour directly on any of the elements. Instead, we are "faking" it by doing three things:
Adding border-bottom to the image, giving it a height equal to the
height of the header less the height of the image, and setting its
colour to white.
Adding a :before pseudo-element to the header, positioning it
top & left, with a background colour of white and a height equal to
that of the header. Using calc to set its width allows it to
scale to the left edge of the image and, effectively, hides it when
the window width is 960px or less as the result of the calculation
will be zero or a negative value.
Adding a :after pseudo-element to the header, positioning it top
& right, with a background colour of white and a height equal to
that of the header. The really "hacky" bit is setting the width
here. Using calc to subtract the widths of the :before element
and image works, provided the window width is greater than 960px -
less than that and the negative value of the :before width causes
the :after to encroach on the image. So we use 2 media queries to
set the width, the first as just explained for when the window width
is greater than 960px and the second for when the window width is
960px or less, which simply use calc to subtract the width of the
image from the overall width of the header.
body{
background:#ddd;
font-family:arial;
margin:0;
}
header{
border-bottom:1px solid #000;
height:165px;
width:100%;
left:0;
position:fixed;
top:0;
z-index:2;
}
header:before{
background:#fff;
content:"";
display:block;
left:0;
height:165px;
position:absolute;
top:0;
width:calc((100% - 960px) / 2);
z-index:1;
}
header:after{
background:#fff;
content:"";
display:block;
height:165px;
position:absolute;
right:0;
top:0;
z-index:1;
}
#media all and (min-width:961px){
header:after{
width:calc(100% - ((100% - 960px) / 2) - 50px);
}
}
#media all and (max-width:960px){
header:after{
left:50px;
}
}
.content{
width:960px;
margin:0 auto;
position:relative;
z-index:2;
}
img{
border-bottom:115px solid #fff;
height:50px;
width:50px;
}
nav{
float:right;
}
nav ul li{
display:inline;
list-style:none;
}
nav ul li a{
text-decoration:none;
}
main{
padding:176px 10px 10px;
}
main p{
margin:0 0 10px;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="">
<nav class="main-navigation">
<ul>
<li>THE FIRM</li>
<li>TEAM</li>
<li>PRACTICE AREA</li>
<li>RANKINGS</li>
<li>CLIENTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus condimentum nulla. Maecenas rutrum non mauris nec finibus. Sed dictum rhoncus turpis quis suscipit. Aliquam quam tortor, aliquam et tristique vitae, tempus in est. Donec non eros ac enim fringilla pulvinar. Praesent aliquam velit vel lectus tincidunt mattis. Maecenas id vulputate est. Ut consequat placerat enim vel lacinia. Aenean nec mattis metus, id tempus diam. Nunc viverra est et nunc tincidunt, at ullamcorper magna blandit. Maecenas egestas lectus nunc, ac cursus erat ullamcorper nec. Curabitur ut imperdiet libero.</p>
<p>Donec lorem nisi, ullamcorper in ex eu, consequat tristique lorem. Pellentesque feugiat ultrices vestibulum. Integer aliquet sodales suscipit. Integer posuere non orci id commodo. Phasellus elementum velit purus, nec efficitur diam semper ut. Vivamus at lobortis velit. Aenean egestas vestibulum ante, nec laoreet lorem vestibulum non. Donec a velit augue. Donec varius vehicula volutpat. Proin quam arcu, sodales lobortis risus sagittis, gravida consequat dui. Praesent nec quam eu ligula ullamcorper gravida. Mauris et quam volutpat, blandit orci sit amet, convallis nibh. Proin maximus neque suscipit ex egestas, et scelerisque nisi blandit. Suspendisse nunc dui, ullamcorper vel metus non, condimentum tristique nisi. Nulla nunc mauris, euismod non velit ac, consequat fringilla lectus.</p>
<p>Ut nulla purus, dictum ultrices accumsan ultricies, tincidunt vitae libero. Pellentesque auctor nisl fringilla justo fringilla condimentum. Maecenas nisi lacus, tincidunt id consequat eu, auctor sollicitudin ex. Nulla vel ante a lectus pellentesque ornare. Sed id pulvinar dolor. Integer eget dui nulla. Fusce in orci nec nisi ultrices ultricies a sed urna. Proin rutrum tristique erat, id facilisis mi. Donec nec est et odio convallis porta.</p>
<p>Sed ornare convallis nibh ultricies bibendum. Cras condimentum tristique ipsum, eu aliquam tortor porta et. Quisque auctor erat at felis feugiat pretium. Etiam finibus pharetra libero, vel suscipit odio. Mauris placerat mollis nibh sed varius. Sed at ipsum sem. Aliquam dictum pulvinar feugiat. Aenean vel suscipit libero. Nullam fringilla massa dapibus tellus tincidunt, in blandit turpis bibendum. Phasellus ac congue diam. Fusce consequat facilisis sagittis. Duis non suscipit mi.</p>
<p>Aliquam et sodales ligula, vel porta nulla. Fusce quis ante dictum, porttitor odio quis, dictum arcu. Maecenas maximus tincidunt euismod. Aliquam mauris est, posuere eu nisl hendrerit, elementum bibendum sem. Aenean in est augue. Nulla maximus neque non eros imperdiet, at malesuada tortor viverra. Curabitur dolor est, eleifend quis velit quis, placerat condimentum mi. Pellentesque tempus orci sit amet lacus lacinia, venenatis vestibulum magna euismod. Donec rutrum dignissim orci, nec dignissim sem faucibus nec. Nullam vel gravida nunc.</p>
<p>Aliquam justo velit, porta nec venenatis et, fringilla ac nisi. Praesent pharetra nulla ut nibh tristique, ac vulputate orci elementum. Mauris erat turpis, aliquet id fringilla in, iaculis in quam. Proin tortor arcu, viverra non fermentum at, pretium quis sem. Vivamus in ex molestie, tempor sem sed, feugiat dui. Aenean imperdiet augue et sem laoreet, sit amet porta tellus tristique. Aliquam et dapibus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ullamcorper vel lacus nec vulputate.</p>
<p>Sed sapien massa, laoreet vitae aliquam et, tincidunt in augue. Maecenas justo tellus, ullamcorper ut pellentesque non, pulvinar non mauris. Etiam eu molestie erat, ac tincidunt lectus. Morbi scelerisque dui malesuada justo venenatis, id porttitor sapien rhoncus. Vivamus sit amet turpis sit amet nibh elementum mollis eget in velit. Suspendisse hendrerit, felis at laoreet pharetra, magna lorem elementum tellus, vel vehicula arcu tortor in purus. Phasellus vehicula dui id dolor pellentesque imperdiet. Nam venenatis augue sed justo lacinia, et consequat nibh facilisis. Quisque auctor erat id sem tincidunt ultricies. Proin fringilla nisl at lectus viverra, sit amet rhoncus felis lobortis.</p>
<p>Suspendisse tempus imperdiet leo eget sollicitudin. Suspendisse blandit ultricies volutpat. Sed volutpat ligula id velit auctor, et eleifend sapien dictum. Aliquam in vestibulum odio. Donec metus orci, suscipit bibendum ex sit amet, fermentum facilisis sem. Morbi rhoncus turpis viverra dui lobortis auctor. Vestibulum sit amet ante metus. Sed ut ex id felis sollicitudin feugiat. Praesent lobortis convallis arcu, elementum malesuada sem dignissim vitae. Vivamus id vulputate nisl. Sed pulvinar vehicula lorem, vel imperdiet elit.</p>
<p>Proin orci erat, rhoncus ac fermentum nec, euismod non nisi. Sed ornare sapien vel interdum blandit. Duis odio sem, pretium ut diam non, tempus vestibulum mauris. Maecenas vitae sapien tempus, varius tortor posuere, ullamcorper purus. Nulla pulvinar quam ut orci tincidunt, eu sagittis ex aliquet. Donec vestibulum auctor est ac suscipit. Mauris tristique lacinia euismod. Nulla ante elit, ornare et luctus vitae, vehicula at ex. Nulla vel tristique dui. Nulla ac sagittis lectus. Curabitur auctor semper felis, et tempus turpis euismod eget. Morbi tempus auctor ante, nec volutpat leo accumsan sed. Nullam ullamcorper odio at nunc ornare porta. Cras at lacus dapibus, convallis lectus ut, elementum tortor. Sed at mauris mi.</p>
<p>Cras egestas mi libero, vel pharetra libero congue eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pharetra, arcu quis tincidunt ullamcorper, arcu sem finibus justo, et luctus nunc justo in nunc. Fusce tempus fringilla diam a mattis. Ut nec est nisi. Fusce tristique nunc mauris, ut porttitor libero consectetur id. Donec libero orci, eleifend eget sagittis ut, venenatis ac justo.</p>
<p>Praesent auctor porta turpis at auctor. Quisque pulvinar nisi et dui convallis gravida. Aenean quis nulla neque. Pellentesque et erat at ipsum finibus ultricies. Curabitur eu euismod nulla, ac pretium augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat lacinia augue ac fermentum. Donec scelerisque finibus felis, vitae dignissim lorem ultrices in. Etiam convallis arcu sed libero convallis, non dictum dolor luctus. Etiam eget eros laoreet, ullamcorper justo quis, mattis nibh. Nullam mauris metus, aliquam at turpis vitae, luctus ullamcorper tortor. Nullam maximus posuere quam, id efficitur sapien.</p>
<p>Maecenas purus metus, egestas quis eleifend cursus, euismod nec quam. Suspendisse a volutpat ligula. Nulla dignissim lacus eget rutrum sollicitudin. Pellentesque commodo accumsan ultrices. Quisque porttitor orci laoreet, sollicitudin mauris vitae, sollicitudin velit. Nunc auctor volutpat efficitur. Sed tempor odio neque, ac vehicula dui tincidunt at. Nullam enim ex, fermentum non gravida faucibus, vulputate non augue. Praesent vulputate pharetra suscipit. Maecenas tempor venenatis leo ut ullamcorper. Cras cursus iaculis risus vel eleifend.</p>
<p>Nunc dictum lacinia leo eget venenatis. Sed aliquet scelerisque neque, a convallis nisl. Mauris tempus libero efficitur ornare molestie. Integer non finibus ex, vitae tempus massa. Donec quis sem erat. Maecenas consectetur, nibh ac porta feugiat, nisi mauris dictum quam, ac rhoncus nulla nibh in augue. Suspendisse tristique ligula ex, viverra fermentum nisi mattis a. Duis ullamcorper dapibus felis ornare maximus. Cras et hendrerit elit. Sed rutrum eleifend ante, ac interdum elit placerat ac. Duis a consequat lacus. Morbi congue orci eget est bibendum vehicula. Quisque nec erat nec sapien porta elementum vel eget libero. Donec condimentum tortor quam, eu porttitor erat lacinia non. Maecenas vitae laoreet massa. Aenean convallis erat a rhoncus fermentum.</p>
<p>Etiam augue enim, egestas vel auctor et, finibus nec mi. Cras vitae lectus vitae orci ullamcorper posuere. Aliquam enim massa, maximus eu nibh quis, rhoncus varius augue. Praesent quis libero diam. Cras ut sem tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non felis ac eros vehicula lobortis. Vestibulum malesuada leo sit amet bibendum sollicitudin. Ut euismod blandit purus at egestas. Nulla pellentesque risus vel libero vehicula efficitur. Nam id facilisis diam, vestibulum pulvinar metus. Nullam arcu eros, iaculis vitae lectus eu, porttitor facilisis massa.</p>
<p>Duis pellentesque tellus semper quam convallis, non condimentum odio auctor. Maecenas vitae blandit libero. Vivamus facilisis felis et est malesuada feugiat. Aenean quis augue ut mauris ultrices molestie. Aenean a velit elit. Sed sit amet viverra ex. Sed facilisis tempor placerat. In metus metus, venenatis sed nisi sit amet, posuere ultrices arcu. Integer laoreet fringilla est, quis interdum sem imperdiet ut. Sed sagittis fringilla orci non ornare. Donec viverra leo ut justo feugiat eleifend. Fusce dapibus vel ligula non convallis. Cras sed suscipit nisl, in varius diam. Vestibulum imperdiet blandit imperdiet. Proin accumsan augue quis turpis viverra pharetra.</p>
<p>Phasellus elementum nibh ac efficitur commodo. Donec vestibulum velit felis, eget mollis libero maximus ut. Proin semper purus nec libero volutpat, non feugiat nisl pellentesque. Nam fringilla lacinia dui, at feugiat odio vulputate id. Aenean condimentum congue justo eu interdum. Pellentesque at quam felis. Nulla ac elementum orci, in tristique ante.</p>
<p>Quisque in nisi consectetur, egestas urna id, iaculis ligula. Etiam varius lacinia velit, sit amet convallis sapien dignissim a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit diam. Nunc vehicula, urna sed iaculis volutpat, nisl ipsum tempus tellus, in tincidunt nulla ipsum sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse non tortor at mi blandit varius id at tellus. Maecenas congue et orci ut pharetra.</p>
<p>Proin rutrum laoreet velit, a finibus lorem interdum non. Proin pharetra sagittis commodo. Duis in diam in nunc accumsan dictum vitae vel orci. In vulputate nunc dolor, nec venenatis orci ultrices at. Sed convallis ipsum pharetra tellus sagittis, a malesuada magna laoreet. Duis dapibus fermentum viverra. Maecenas varius magna sit amet lacus accumsan viverra. Nullam erat massa, vulputate ut urna et, aliquam mollis sem. Maecenas lorem diam, suscipit gravida arcu sit amet, porta vulputate tellus. Proin varius placerat ligula. Phasellus et lacus sapien. Donec feugiat ut neque id rutrum. Maecenas luctus turpis enim, in cursus ipsum egestas eu. Aenean ornare dui mauris, quis consequat orci hendrerit at. In erat purus, vulputate eget lectus id, gravida semper elit.</p>
<p>Vestibulum tincidunt pellentesque velit, vitae aliquam neque convallis a. Curabitur sit amet lectus sit amet mi pharetra interdum vitae non enim. Sed molestie euismod metus sit amet ullamcorper. Nam porta consectetur laoreet. Nunc varius ultrices vestibulum. Morbi dignissim leo libero, eget rhoncus leo semper a. Suspendisse eget varius diam. Curabitur facilisis finibus erat, sit amet placerat neque faucibus a. Aenean id nisi lacus. Nunc vehicula, justo id pretium gravida, dui dolor posuere augue, id egestas enim tortor quis dui. Donec dictum aliquet arcu, in egestas tellus ornare et. Morbi feugiat vehicula lectus quis maximus. Mauris dictum, sapien et fringilla convallis, dui urna tristique nisl, id fermentum purus dui sed est. Pellentesque faucibus pretium pharetra.</p>
<p>Maecenas quam neque, faucibus non dapibus non, porttitor et diam. Fusce quis eleifend purus. Duis condimentum vitae tortor vel iaculis. Nulla porta ultricies semper. Phasellus sit amet neque lacus. Suspendisse egestas massa at imperdiet maximus. Nam ante justo, condimentum in malesuada et, cursus eu purus.
</main>
ASIDE: Here is the Fiddle I was working on before you supplied your CSS.
Mabe somthing like this?
section {
background:#ddd;
height:1000px;
}
header {
width:100%;
height:60px;
}
.logo {
position:relative;
float:left;
width:100px;
height:60px;
background:red;
opacity:.3;
}
nav {
position:relative;
float:left;
width: calc( 100% - 100px ); /* 100% - logo-width */
height:60px;
background:#eee;
}
}
<section>
<header>
<div class="logo">Logo</div>
<nav>
<div>Rest of nav</div>
</nav>
</header>
</section>