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
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 have a fixed header & a div inside the container. The div which is inside the container overlaps the header. I tried position: relative but it is not giving me the result as expected!
#syllabus_container {
background:#ADC;
left:0;
position:relative;
width:100%;
top:0;
}
Here is the live effect of my code!
pleas use below css, use z index to show it on top, you can check on below link
https://www.w3schools.com/code/tryit.asp?filename=FLOPWZTB16T2
#header_container {
background: #ABC;
height: 75px;
left: 0;
position: fixed;
width: 100%;
top: 0;
z-index: 99999999999999;
}
Check the code below.Hope it helps
.header{
position:fixed;
width:100%;
top:0;
left:0;
height:70px;
background:pink;
text-align:center;
color:#fff;
font-size:20px;
z-index:9;
}
.content{
margin-top:72px;
}
<div>
<div class="header">The header</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum lectus, rhoncus pretium lectus ac, laoreet dignissim nibh. Proin eleifend malesuada dapibus. Nunc quis arcu id nibh posuere sodales eu ac orci. Morbi bibendum efficitur odio vitae venenatis. In nec viverra tortor. Suspendisse non nibh ut sem commodo faucibus ut ut leo. Cras tincidunt ullamcorper nibh, ac bibendum leo volutpat ut.
Sed id ultrices ex. Aenean id laoreet mi. Aenean viverra sit amet risus sed tristique. Phasellus varius massa eu vestibulum euismod. Etiam vel velit ut purus ornare accumsan. Maecenas vulputate eu tellus a egestas. Vivamus maximus imperdiet risus, non posuere ante lobortis sed. In faucibus aliquam odio. Maecenas et mollis purus, at luctus lectus. In eget nibh quam. Duis in tempor nisl, ac imperdiet erat. Nam condimentum consectetur sapien. Nullam non urna vitae est convallis rhoncus vitae nec enim.
Phasellus ullamcorper egestas metus, in imperdiet magna blandit id. Fusce eu magna in ante aliquam congue. Pellentesque euismod turpis eu lorem rhoncus, sed condimentum elit cursus. Suspendisse at feugiat erat. Duis malesuada ligula sed felis rutrum mattis. Donec ac magna dictum, vehicula tellus ut, tristique ligula. Quisque quis congue sapien, eu laoreet tortor. Pellentesque commodo metus diam, non egestas quam dignissim nec. Curabitur non velit purus. Pellentesque mauris velit, imperdiet vel imperdiet quis, viverra ut leo. Ut eget malesuada libero. Sed tristique metus commodo fermentum tristique. Cras accumsan massa vitae dolor scelerisque, eu tincidunt mauris venenatis. Ut in purus vitae risus aliquam mattis. Cras cursus maximus elit, tempor pretium urna congue in.
Nulla facilisi. Sed feugiat elementum enim, et posuere dolor tempus pharetra. Nulla a orci eget lorem tincidunt aliquam id id nulla. Morbi facilisis eget elit in volutpat. Aliquam sed luctus enim, id aliquam nunc. Pellentesque eu elit dui. Proin ornare tempor eros, vitae faucibus sapien placerat a. Mauris volutpat feugiat est a finibus. Phasellus in mattis diam. Mauris vitae dignissim dui. Proin tincidunt arcu sit amet pretium tristique. Mauris ullamcorper at neque eget euismod. Nam massa massa, mattis quis risus vitae, elementum lobortis justo.
Nam eu est non dui molestie fringilla. Aliquam ullamcorper elit ligula, quis vestibulum lectus auctor vitae. Nulla a blandit sem. Nulla mauris nisl, molestie sed dolor nec, feugiat imperdiet orci. Ut commodo at metus in gravida. Vivamus sed sapien auctor, molestie est in, ullamcorper diam. Mauris molestie quam non venenatis laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a tempus erat. Maecenas dui orci, malesuada a vulputate ac, egestas ac ante. In dolor quam, ornare eget tincidunt sit amet, mattis at diam. Etiam nec malesuada magna.
Nam vitae risus mi. Maecenas faucibus purus sed arcu posuere, ut eleifend risus facilisis. Integer suscipit, tortor eu malesuada porttitor, tortor sem laoreet enim, vitae tincidunt velit nisl sed turpis. Praesent magna velit, auctor vel mattis gravida, fermentum ut turpis. Vivamus nisl dui, ullamcorper nec convallis vitae, suscipit ut mi. Curabitur condimentum in leo congue consectetur. Praesent sit amet massa hendrerit, pretium lectus quis, egestas augue. Mauris ac pretium purus, eget fermentum nulla. Vivamus sed est massa. Praesent vitae nisl sed nisl porta vestibulum. Donec maximus facilisis urna, nec semper urna suscipit quis. In nisi turpis, suscipit eu elit vitae, consectetur lobortis mi.
Proin ut orci diam. Ut venenatis eget leo nec mollis. In ut lorem vel dolor mollis feugiat. Pellentesque quam risus, aliquet vitae ultricies id, sodales eu risus. Vestibulum sodales non sapien a cursus. Aenean sapien nunc, aliquet in metus quis, viverra mollis nisl. Pellentesque eu hendrerit lacus, id consequat enim. Nulla lectus erat, congue non turpis in, ornare dapibus ex. In in molestie mi. Nunc sagittis, ante nec finibus aliquam, sem est molestie ipsum, at interdum dolor neque nec dolor. Cras et lectus accumsan, volutpat felis sed, vehicula enim.
Sed vitae lacinia neque. In eleifend ex vestibulum sem gravida, vitae pellentesque mi laoreet. Nulla placerat mauris at viverra pulvinar. Nunc ut ante ante. Aliquam in vehicula diam. Sed mauris neque, porta vitae sagittis vel, dapibus sed ligula. Mauris magna orci, maximus ac dictum eget, auctor vitae nisl. Vestibulum hendrerit sem vitae mi cursus, quis consectetur est hendrerit. Sed id metus fringilla, mattis est vel, cursus ligula. Sed non auctor lorem, at facilisis ipsum. Mauris venenatis accumsan lacus, et ornare purus cursus at. Suspendisse lacinia porttitor tincidunt. Sed vitae diam leo. Pellentesque eu malesuada libero. Cras varius ultrices augue, at ullamcorper nunc tristique non.
Curabitur et molestie justo. Pellentesque et neque quis risus efficitur porttitor at eget odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elit libero, dignissim quis rhoncus sed, aliquam non ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis erat tempus pretium tempus. Ut vehicula ipsum leo, vehicula dignissim dui dignissim et. Vivamus et lacinia magna.
Integer a diam purus. Maecenas condimentum quam convallis tincidunt vestibulum. Proin vestibulum ut leo elementum hendrerit. Sed diam mi, vehicula sed auctor sit amet, fringilla vitae augue. Curabitur magna eros, maximus et erat et, sodales accumsan tellus. Sed sagittis felis facilisis dolor euismod, ut dictum nulla convallis. Sed massa nulla, sodales malesuada pellentesque sagittis, vehicula id ligula. Nunc bibendum, odio sit amet suscipit porttitor, dui sapien consectetur libero, in ultrices justo dolor ac nulla. Cras gravida orci nec leo aliquam maximus. Vestibulum quis lobortis sapien. Integer pharetra elit enim, a hendrerit leo porta a. Phasellus efficitur enim vitae laoreet posuere. Nullam eu quam pellentesque, commodo enim a, venenatis turpis. Donec pulvinar eleifend urna, in tincidunt lorem imperdiet ut.
Nam id orci sit amet ante aliquam tincidunt ut vel nisi. Fusce ornare nibh lacus, non sagittis arcu lobortis eu. Nulla purus dui, viverra in sodales vitae, commodo at odio. Aliquam dignissim lacus quis velit fringilla ultrices. Aliquam nisi lectus, consequat quis risus et, pulvinar malesuada nisl. Cras lobortis magna id volutpat imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget porta lacus, quis condimentum turpis.
In vitae porttitor purus. Aliquam ullamcorper metus eget urna maximus, non viverra mi tempor. Proin elit nisi, cursus a blandit vitae, dignissim in lorem. Vestibulum sollicitudin tellus placerat porttitor molestie. In hac habitasse platea dictumst. Nulla venenatis tortor sit amet ex venenatis, in consequat quam dictum. Donec pellentesque nunc et ipsum fringilla, ac lobortis risus sagittis.
Morbi pretium, nibh eu fermentum porta, nunc diam sagittis urna, sed rhoncus purus mi at magna. Nam pulvinar, justo a efficitur ultrices, arcu libero finibus massa, nec blandit nisi ipsum sed neque. Integer venenatis purus velit, nec malesuada ipsum iaculis nec. Cras consequat orci orci, ac aliquam dui laoreet sed. Fusce feugiat ligula in dapibus rhoncus. In sed suscipit arcu. Nam varius varius orci, id dictum urna pellentesque finibus. Phasellus non ex vitae diam tristique egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum finibus quam nec ligula iaculis, vitae maximus nulla aliquet. Nullam faucibus lacinia sollicitudin. Ut hendrerit cursus velit, et vestibulum elit sagittis nec.
Morbi tempor commodo eros ac posuere. Nunc rhoncus tempus neque, eget laoreet mi aliquam at. Maecenas eget metus finibus, fringilla enim pellentesque, rutrum ante. Donec nec mollis sem. Maecenas in ante malesuada, molestie felis eu, euismod neque. Nam dui magna, gravida non orci vel, suscipit pharetra nulla. Pellentesque in sem porta, auctor arcu ut, tincidunt diam. Aenean commodo massa ut lectus mollis viverra. Praesent ultrices ac lorem in aliquet. Aenean interdum, nisl quis hendrerit venenatis, arcu est placerat felis, a mattis ligula justo ut ligula. Sed dictum felis tellus, id vulputate mauris pellentesque sit amet. Vivamus at turpis iaculis, dictum eros at, pellentesque magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt sapien in tincidunt rutrum. Maecenas tincidunt lacus at est scelerisque, vel laoreet urna viverra.
Etiam aliquam, elit nec dictum auctor, purus libero sollicitudin erat, nec malesuada mi ex at massa. Cras ac lorem sed nibh dignissim lobortis. Quisque auctor consectetur enim sit amet ultricies. Nullam nec mauris nibh. Morbi at venenatis neque. Maecenas velit nisi, sodales non lorem ac, pellentesque sodales justo. Morbi sed placerat diam, ut tristique arcu. Aenean sapien risus, ultrices quis porttitor commodo, elementum vestibulum lacus. Phasellus eleifend in orci in feugiat. Morbi iaculis, ex sed sollicitudin eleifend, neque tellus sodales metus, a elementum dui ipsum id massa. Suspendisse cursus ut quam id consectetur. Suspendisse potenti. In eu libero est. In vulputate dictum lacus, quis sodales nulla iaculis quis. Nullam sodales mollis tortor, at vulputate augue accumsan sed. Donec sagittis massa enim, eget laoreet arcu tristique eu.
</div>
</div>
I have a fairly simple layout (bootstrap v4 classes included):
<div class="d-flex flex-column" style="width: 100%; height: 100vh;">
<div>foo</div>
<div style="flex: 1"></div>
<div>bar</div>
</div>
Which leaves me with:
------------------------------------
| foo |
------------------------------------
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
------------------------------------
| bar |
------------------------------------
A header and a footer that take as much height as their content has, and a body that expands itself in order to fill the empty space available in the browser.
The problem comes when there is more content than the total height of the browser - (header height + footer height), in which case the body keeps expanding itself.
Is there a way I can limit the body height to be as much as the remaining space? Remaining space == Browser height - (header height + footer height).
Tips:
I don't know the height of the header or the footer, I will downvote solutions with hardcoded values. Restrain from answering if you don't understand what this means.
I don't want Javascript. This must be only CSS. I will downvote answers that contain javascript.
To prevent the content from exceeding the maximum available space left by the header and footer use the min-height property in your content class.
By default, flex items won’t shrink below their minimum content size
(the length of the longest word or fixed-size element). To change
this, set the min-width or min-height property.
body {
margin: 0;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: dodgerblue;
}
.container {
flex: 1;
min-height: 0;
overflow-y: scroll; /*overflow: hidden;*/
background-color: turquoise;
}
footer {
background-color: violet;
}
<main>
<header>
Header
</header>
<div class="container">
Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate mi odio, ac finibus tortor tempus a. Quisque eu ex ac nibh eleifend fringilla. Nunc accumsan arcu nec pharetra congue. In iaculis ante eu velit rutrum lobortis. Proin et
congue turpis. Quisque gravida nisl et sem lobortis, nec ultrices urna pretium. Nunc a viverra urna. Nam a cursus ligula. Aliquam justo enim, aliquam quis nulla ut, ornare sollicitudin ex. Sed vestibulum sodales semper. Duis vestibulum laoreet nibh
non condimentum. Maecenas sit amet scelerisque libero. Phasellus consequat quam id elit hendrerit, sit amet auctor augue finibus. Proin eu porta dolor. Suspendisse neque diam, iaculis eu felis sit amet, elementum scelerisque velit. Nunc mollis, magna
quis dignissim bibendum, magna ligula tristique diam, vitae bibendum lorem est in nisi. Nulla euismod auctor turpis, laoreet mattis neque bibendum et. Morbi condimentum nisl sit amet velit dignissim ultricies. Vestibulum commodo felis id nisl placerat
pharetra. Morbi ac lectus non metus porttitor mollis scelerisque vitae felis. Suspendisse luctus sollicitudin metus nec aliquet. Vestibulum in convallis leo. Nunc vel consequat libero. Sed dapibus ligula nisl, quis sagittis quam mollis sit amet. Duis
et viverra lorem. Nunc luctus risus ut justo venenatis consectetur. Sed et porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec sapien arcu. Suspendisse placerat cursus erat, pretium
finibus purus. Nulla at risus nulla. Mauris at lectus id diam rutrum aliquam eget et ante. Maecenas rutrum orci et ornare iaculis. Suspendisse potenti. Morbi est felis, bibendum at ante sed, rhoncus varius dui. Curabitur ac neque vitae lorem feugiat
tincidunt sed vitae quam. Aliquam ornare orci eu magna sollicitudin, quis fermentum diam condimentum. Ut consequat pulvinar risus. Vivamus vestibulum massa ut eros euismod sagittis. Fusce volutpat nisl aliquet, cursus dolor vestibulum, blandit turpis.
Nunc elementum tempus diam, quis ornare lectus pharetra ut. Sed sit amet efficitur nisl, a dictum metus. Suspendisse in purus ac elit tristique pulvinar at id mi. Donec mollis sem ut risus scelerisque sagittis. Maecenas gravida tristique odio id feugiat.
Etiam maximus nunc non erat facilisis luctus. Vivamus ut magna facilisis, iaculis massa quis, luctus nulla. Cras mattis faucibus rutrum. Curabitur quis auctor lacus. Nam tempus sapien vitae finibus dignissim. Curabitur sagittis, magna ac mattis dictum,
lacus nisi pretium purus, et maximus sem eros non turpis. Donec vel tortor erat. Maecenas finibus velit hendrerit lorem vestibulum imperdiet. Integer sed sem est. Fusce iaculis justo at ipsum cursus sodales. Integer vel odio ut enim feugiat euismod
id ac ex. Donec vel ante scelerisque, varius elit eget, finibus lectus. Quisque mattis, eros quis congue posuere, lorem quam scelerisque dolor, sed sagittis lacus massa eu ligula. Fusce viverra vitae mauris vitae euismod. Etiam sapien odio, fringilla
sit amet ultricies ut, vulputate sed leo. Vivamus maximus quam a risus interdum, ut venenatis ipsum tincidunt. Donec ultrices nisi id euismod egestas. Proin nec magna euismod, egestas nibh et, accumsan dolor. Integer sit amet libero eros. Cras augue
risus, pretium et aliquam vitae, malesuada id tortor. Nam fermentum placerat imperdiet. Etiam aliquam in tortor in dictum. Integer vel orci vitae dui dignissim ultricies vitae eget dui. Nullam vitae urna nec urna finibus cursus. Vestibulum scelerisque,
erat in auctor accumsan, ipsum elit bibendum sem, nec viverra nisi risus at urna. In sit amet nulla scelerisque, volutpat mi sed, pharetra ex. Nullam in felis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Nulla ut convallis arcu. Maecenas elementum nulla elit, id eleifend urna convallis id. In a pellentesque elit, nec sollicitudin orci. Vestibulum lacus odio, pulvinar nec placerat eu, porttitor sit amet ex. Integer sed pharetra turpis. Vestibulum
accumsan nulla et mi finibus, auctor congue ex lobortis. Cras fringilla purus velit. Vivamus sit amet semper tellus, non vehicula erat. Nam a finibus massa, at tempus felis. Integer at semper purus, eget laoreet neque. Etiam odio leo, laoreet at lacinia
ut, faucibus at magna. Mauris vestibulum nunc in ipsum feugiat pulvinar. Nulla lacinia diam eros, vel cursus ante ullamcorper sit amet. Pellentesque dictum, urna ac tincidunt ullamcorper, sem ligula faucibus tortor, eu lobortis risus est in nulla.
Phasellus magna sem, dignissim vitae justo vitae, dignissim ultrices diam. Mauris in neque vitae nisl elementum ornare ut tempor justo. Vestibulum vitae leo felis. Praesent porttitor sem et aliquam dignissim. Aenean eu quam id nulla hendrerit laoreet
sed dapibus purus. Praesent maximus rhoncus turpis, at egestas turpis. Vivamus turpis leo, porttitor id accumsan at, sagittis vel ante. Integer ultrices euismod euismod. Fusce bibendum lorem sit amet mi accumsan finibus. Morbi auctor quam id ex suscipit
maximus. Sed vel sem sollicitudin turpis rutrum gravida et eget mi. Nulla ac justo a neque tempus lobortis eu in mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus pulvinar aliquam nulla, sit amet pellentesque dolor. Proin
sed mollis ante. Nullam lectus diam, placerat non laoreet sit amet, imperdiet sed augue. Ut mollis mattis sem, ac suscipit mi eleifend nec. Phasellus convallis massa ut arcu viverra, vitae auctor lacus convallis. Etiam vitae blandit nunc. Donec non
turpis nec purus blandit dictum. Sed bibendum sollicitudin massa non egestas. In sed neque sit amet dolor egestas sodales convallis in nunc. Sed iaculis libero nec sem porttitor, accumsan bibendum magna eleifend. Mauris interdum quam nunc, sit amet
cursus orci consequat et. Phasellus nec maximus dolor. Sed vestibulum mattis iaculis. Praesent sodales sed nunc ac congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec vulputate mi odio, ac finibus tortor tempus a. Quisque eu ex ac nibh eleifend fringilla. Nunc accumsan arcu nec pharetra congue. In iaculis ante eu velit rutrum lobortis. Proin et congue turpis. Quisque gravida nisl et sem lobortis,
nec ultrices urna pretium. Nunc a viverra urna. Nam a cursus ligula. Aliquam justo enim, aliquam quis nulla ut, ornare sollicitudin ex. Sed vestibulum sodales semper. Duis vestibulum laoreet nibh non condimentum. Maecenas sit amet scelerisque libero.
Phasellus consequat quam id elit hendrerit, sit amet auctor augue finibus. Proin eu porta dolor. Suspendisse neque diam, iaculis eu felis sit amet, elementum scelerisque velit. Nunc mollis, magna quis dignissim bibendum, magna ligula tristique diam,
vitae bibendum lorem est in nisi. Nulla euismod auctor turpis, laoreet mattis neque bibendum et. Morbi condimentum nisl sit amet velit dignissim ultricies. Vestibulum commodo felis id nisl placerat pharetra. Morbi ac lectus non metus porttitor mollis
scelerisque vitae felis. Suspendisse luctus sollicitudin metus nec aliquet. Vestibulum in convallis leo. Nunc vel consequat libero. Sed dapibus ligula nisl, quis sagittis quam mollis sit amet. Duis et viverra lorem. Nunc luctus risus ut justo venenatis
consectetur. Sed et porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec sapien arcu. Suspendisse placerat cursus erat, pretium finibus purus. Nulla at risus nulla. Mauris at lectus
id diam rutrum aliquam eget et ante. Maecenas rutrum orci et ornare iaculis. Suspendisse potenti. Morbi est felis, bibendum at ante sed, rhoncus varius dui. Curabitur ac neque vitae lorem feugiat tincidunt sed vitae quam. Aliquam ornare orci eu magna
sollicitudin, quis fermentum diam condimentum. Ut consequat pulvinar risus. Vivamus vestibulum massa ut eros euismod sagittis. Fusce volutpat nisl aliquet, cursus dolor vestibulum, blandit turpis. Nunc elementum tempus diam, quis ornare lectus pharetra
ut. Sed sit amet efficitur nisl, a dictum metus. Suspendisse in purus ac elit tristique pulvinar at id mi. Donec mollis sem ut risus scelerisque sagittis. Maecenas gravida tristique odio id feugiat. Etiam maximus nunc non erat facilisis luctus. Vivamus
ut magna facilisis, iaculis massa quis, luctus nulla. Cras mattis faucibus rutrum. Curabitur quis auctor lacus. Nam tempus sapien vitae finibus dignissim. Curabitur sagittis, magna ac mattis dictum, lacus nisi pretium purus, et maximus sem eros non
turpis. Donec vel tortor erat. Maecenas finibus velit hendrerit lorem vestibulum imperdiet. Integer sed sem est. Fusce iaculis justo at ipsum cursus sodales. Integer vel odio ut enim feugiat euismod id ac ex. Donec vel ante scelerisque, varius elit
eget, finibus lectus. Quisque mattis, eros quis congue posuere, lorem quam scelerisque dolor, sed sagittis lacus massa eu ligula. Fusce viverra vitae mauris vitae euismod. Etiam sapien odio, fringilla sit amet ultricies ut, vulputate sed leo. Vivamus
maximus quam a risus interdum, ut venenatis ipsum tincidunt. Donec ultrices nisi id euismod egestas. Proin nec magna euismod, egestas nibh et, accumsan dolor. Integer sit amet libero eros. Cras augue risus, pretium et aliquam vitae, malesuada id tortor.
Nam fermentum placerat imperdiet. Etiam aliquam in tortor in dictum. Integer vel orci vitae dui dignissim ultricies vitae eget dui. Nullam vitae urna nec urna finibus cursus. Vestibulum scelerisque, erat in auctor accumsan, ipsum elit bibendum sem,
nec viverra nisi risus at urna. In sit amet nulla scelerisque, volutpat mi sed, pharetra ex. Nullam in felis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ut convallis arcu. Maecenas elementum nulla
elit, id eleifend urna convallis id. In a pellentesque elit, nec sollicitudin orci. Vestibulum lacus odio, pulvinar nec placerat eu, porttitor sit amet ex. Integer sed pharetra turpis. Vestibulum accumsan nulla et mi finibus, auctor congue ex lobortis.
Cras fringilla purus velit. Vivamus sit amet semper tellus, non vehicula erat. Nam a finibus massa, at tempus felis. Integer at semper purus, eget laoreet neque. Etiam odio leo, laoreet at lacinia ut, faucibus at magna. Mauris vestibulum nunc in ipsum
feugiat pulvinar. Nulla lacinia diam eros, vel cursus ante ullamcorper sit amet. Pellentesque dictum, urna ac tincidunt ullamcorper, sem ligula faucibus tortor, eu lobortis risus est in nulla. Phasellus magna sem, dignissim vitae justo vitae, dignissim
ultrices diam. Mauris in neque vitae nisl elementum ornare ut tempor justo. Vestibulum vitae leo felis. Praesent porttitor sem et aliquam dignissim. Aenean eu quam id nulla hendrerit laoreet sed dapibus purus. Praesent maximus rhoncus turpis, at egestas
turpis. Vivamus turpis leo, porttitor id accumsan at, sagittis vel ante. Integer ultrices euismod euismod. Fusce bibendum lorem sit amet mi accumsan finibus. Morbi auctor quam id ex suscipit maximus. Sed vel sem sollicitudin turpis rutrum gravida
et eget mi. Nulla ac justo a neque tempus lobortis eu in mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus pulvinar aliquam nulla, sit amet pellentesque dolor. Proin sed mollis ante. Nullam lectus diam, placerat non laoreet
sit amet, imperdiet sed augue. Ut mollis mattis sem, ac suscipit mi eleifend nec. Phasellus convallis massa ut arcu viverra, vitae auctor lacus convallis. Etiam vitae blandit nunc. Donec non turpis nec purus blandit dictum. Sed bibendum sollicitudin
massa non egestas. In sed neque sit amet dolor egestas sodales convallis in nunc. Sed iaculis libero nec sem porttitor, accumsan bibendum magna eleifend. Mauris interdum quam nunc, sit amet cursus orci consequat et. Phasellus nec maximus dolor. Sed
vestibulum mattis iaculis. Praesent sodales sed nunc ac congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<footer>
Footer
</footer>
</main>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
For example I have a Contact Me clickable header and the information I want for people to see is at the bottom of my page. So I want it to directly scroll down when they click "Contact Me"
With just plain HTML:
<a href='#anchor'>Contact Me</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id='anchor'>Contact info</div>
Wrap your contact me with anchor tag linking it to the div id like so: Contact I included some live code below, as well. Hope this helps!
<nav>
<ul>
<li>Contact</li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a ex a dui bibendum rutrum sed vitae lorem. Cras lacinia eros vel facilisis faucibus. Donec molestie dolor vel congue fringilla. Vestibulum elit tellus, dapibus ut enim eu, gravida ultricies mi. Maecenas nec ornare nibh, vitae luctus risus. Aenean sit amet nisl convallis, lacinia nisi sed, convallis ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget mollis leo. Maecenas ultricies efficitur nisi sed cursus. Etiam nec malesuada est, vitae consectetur massa.
Suspendisse potenti. In sed lacinia neque, id tincidunt elit. Aenean a leo sit amet velit fringilla faucibus a id dolor. Integer nec vehicula ante, ut ultricies risus. Donec nibh purus, feugiat sed nisl vel, iaculis feugiat magna. Morbi neque augue, condimentum vitae sapien sed, rhoncus pulvinar diam. Praesent vestibulum libero purus, quis malesuada sapien convallis at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pharetra mi et pellentesque scelerisque. Mauris vel sapien sed augue rhoncus eleifend tristique ac metus. Proin ac vehicula metus. In hac habitasse platea dictumst. Sed ac tortor vel metus accumsan semper a vitae dui. Sed in eleifend erat, id dictum mauris. Vestibulum ac diam id eros venenatis iaculis.
Suspendisse pharetra pellentesque leo eget hendrerit. Integer et urna posuere, egestas nisi sollicitudin, mattis neque. Nulla lacinia ut mauris et aliquam. In hac habitasse platea dictumst. Morbi in eros commodo, imperdiet urna a, interdum tortor. Donec sagittis, lacus sed tincidunt porttitor, tellus lectus consectetur tortor, eu malesuada urna enim at nulla. Etiam sed tellus ut ex accumsan maximus vitae sit amet ex.
Morbi et eleifend eros, in mattis nisi. Nunc molestie finibus porttitor. Aenean tincidunt, odio vitae feugiat interdum, nibh massa vestibulum nisl, a blandit tortor ante ut quam. Donec condimentum, lacus mattis condimentum feugiat, diam orci blandit justo, quis hendrerit ligula nisl vel urna. Nunc tincidunt orci vel eros vehicula dignissim. In egestas id lacus et dictum. Nulla eros massa, tempus porttitor libero et, posuere consequat quam. Fusce rutrum tincidunt velit, aliquam pharetra ipsum volutpat vitae. Duis ultricies ut metus a convallis. Aliquam quis vehicula neque. Donec mattis sem sed massa rhoncus placerat. Pellentesque sollicitudin aliquet sapien in sollicitudin.
Suspendisse varius tempor accumsan. Sed in libero sed erat convallis ultrices. Vestibulum at congue arcu. Maecenas imperdiet ultricies dui, at faucibus lacus tempus et. Maecenas fringilla ultrices interdum. Nullam laoreet dignissim massa vitae dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper arcu in dui pretium malesuada. Aenean euismod malesuada vestibulum. Donec mattis, sem at rhoncus egestas, quam arcu sagittis sapien, nec maximus ante quam eget mauris. Quisque eleifend non lorem et venenatis. Aliquam erat volutpat. Duis tincidunt nunc turpis, in ullamcorper leo imperdiet eget. In vulputate massa faucibus, efficitur enim luctus, tempor mauris. Suspendisse sed condimentum est, sed lobortis leo. Aenean rutrum nibh malesuada ligula mollis, ut vulputate diam vestibulum.
Donec dapibus neque in velit scelerisque, eget semper orci fringilla. Donec at diam quam. Fusce in enim diam. Vivamus id facilisis ligula. Curabitur sed auctor purus. Vestibulum id nibh et odio varius varius eu vel quam. Donec et malesuada libero. Quisque in velit felis. In sed ipsum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi luctus ex quis sollicitudin dignissim. Aenean tincidunt tristique libero, vitae rhoncus elit eleifend eget. Sed venenatis gravida enim ac fringilla. In blandit nunc non sapien eleifend convallis. Donec a lacinia nisl, et consequat metus.
Donec facilisis, turpis id condimentum sollicitudin, magna justo varius est, auctor suscipit enim arcu at nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus enim, euismod non ultrices at, egestas et magna. Donec laoreet feugiat elit ut porttitor. Pellentesque facilisis bibendum ornare. Cras diam lorem, maximus id nulla at, feugiat sollicitudin felis. Curabitur nisi erat, tincidunt sed semper a, porta non justo.
Duis non dictum purus. Vivamus lobortis enim ut urna ornare, eget pharetra ipsum pretium. Donec mauris nisi, porta non porttitor vehicula, vehicula non orci. Maecenas elementum venenatis interdum. Integer est metus, lobortis id rhoncus in, fringilla nec erat. Vestibulum aliquet mi sit amet odio ultricies mollis. Ut lobortis sapien ac feugiat facilisis. Morbi tellus metus, vulputate facilisis sem quis, gravida auctor dolor. Aliquam nec dictum eros. Suspendisse at laoreet sem. Vestibulum pharetra mauris sapien, id sagittis magna fermentum ac.
Cras congue pulvinar elementum. Phasellus volutpat nibh consequat, finibus nunc eget, laoreet ligula. Phasellus vel tincidunt ante. Maecenas egestas, risus a accumsan facilisis, mi sem ultricies massa, sit amet dignissim sem magna non leo. Vivamus urna libero, aliquet id tortor quis, lobortis laoreet ex. Pellentesque et ligula quis mauris venenatis rutrum. Nullam ultrices, ex vel porttitor congue, magna libero aliquam ipsum, rutrum tristique velit augue vitae augue. Fusce id risus sed odio volutpat posuere. Nam eget dictum urna, quis ullamcorper orci.
Donec imperdiet risus nunc, a fermentum tellus porttitor ut. Nulla laoreet orci ac mollis rutrum. Morbi ut libero ex. Vestibulum faucibus magna ultrices felis iaculis, vel interdum lorem mattis. Phasellus mauris leo, interdum ac ultricies et, pulvinar pretium eros. Morbi ac placerat sem. Maecenas suscipit molestie massa, at porta mauris aliquet sit amet. In hac habitasse platea dictumst. Morbi ullamcorper, velit vel ornare porta, felis lectus elementum massa, quis mattis lacus velit congue diam. Mauris ligula velit, auctor id nisi in, tempus ultricies nisl.
</p>
<div id="contact">
<h1>CONTACT US</h1>
</div>
I discovered multicolumn CSS for me, however found that when printing these styles are ignored.
Is this a known bug? Or did I do something wrong?
div {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
font-size: 16px;
line-height: 1.6;
width: 760px;
}
#media print {
button {
display: none;
}
}
<button onclick="print()">Print...</button>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed vehicula quam, ut placerat ipsum. Cras suscipit dui nisl, at pretium leo mollis sed. Vestibulum iaculis ultricies nulla at mattis. Ut at augue sed nulla mollis pellentesque. Nulla vel
sollicitudin libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla ligula, sit amet pellentesque velit eleifend ut. Fusce id metus et tellus iaculis vulputate. Aliquam blandit fermentum augue. Cras accumsan fermentum
tempor. In pulvinar magna vitae eros faucibus, vitae scelerisque lacus mollis. Aliquam tincidunt justo eu tortor tincidunt, nec bibendum ligula interdum. Duis sit amet tincidunt sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut erat ipsum, elementum sit amet magna ut, rhoncus convallis nunc. Pellentesque tortor magna, posuere eu orci non, ultrices elementum nisi. Integer quis ullamcorper
mi, id porta sapien. Nam ornare dolor quis nisl imperdiet eleifend. Praesent facilisis fermentum fermentum. Etiam porttitor semper nulla vel tincidunt. Fusce a nunc volutpat, ullamcorper erat id, varius nulla. Integer fringilla urna velit, quis varius
velit interdum at. Maecenas at nisi nulla. Nunc laoreet, odio nec fermentum interdum, felis enim bibendum augue, id consectetur nibh nibh a eros. Quisque non ante venenatis, fringilla ipsum semper, dictum lacus. Nulla facilisi. Pellentesque condimentum
feugiat consectetur. Nullam sollicitudin pellentesque quam sit amet auctor. Vestibulum eget lacus ipsum. Praesent tristique quam vel mi pellentesque, et condimentum justo suscipit. In viverra odio justo, et egestas nulla mattis sed. Etiam id porttitor
orci. Vivamus at cursus quam. Maecenas placerat lacus ut pulvinar imperdiet. Aliquam varius arcu lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare suscipit posuere. Nullam vel sodales nisl,
ac mollis quam. Nam imperdiet faucibus ipsum. Curabitur in felis in mi tempor pharetra. Mauris eu egestas diam. Pellentesque placerat lectus vitae cursus adipiscing. Proin non enim eros. Integer id semper ante. Vivamus pulvinar, libero in laoreet
pellentesque, ipsum lectus suscipit dolor, a mollis erat turpis quis quam. Curabitur sapien orci, lobortis sit amet tincidunt eget, rhoncus id mi. Aliquam accumsan velit sit amet purus ullamcorper congue. In hac habitasse platea dictumst. Aliquam
quis purus venenatis, sagittis augue non, fringilla enim. Nunc non semper justo, nec fermentum tortor. Donec fringilla massa at arcu dictum, at consequat dui faucibus. Cras sed eleifend ante. Etiam non nisi nisi. Nam aliquet felis non turpis pretium,
quis scelerisque tortor auctor. Donec eu porttitor erat. Cras egestas tincidunt erat ac euismod. Ut eget dolor vitae magna commodo iaculis vitae nec purus. Sed vitae eros mi. Donec eu justo urna. Vivamus volutpat rhoncus erat, sit amet malesuada ligula
pellentesque nec. Nullam sollicitudin diam arcu, quis tincidunt dui pretium et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius at libero et pulvinar. Fusce ut tincidunt felis. Ut vulputate cursus facilisis.
Etiam erat nunc, feugiat a vestibulum vel, posuere in leo. Ut ac aliquet turpis, non ultricies mauris. Nam sed elit suscipit, mollis urna eu, laoreet odio. Duis porttitor vulputate magna, eu porta augue adipiscing volutpat. Vestibulum mi lectus, pulvinar
at pharetra sit amet, rhoncus vel lorem. Pellentesque semper, quam sit amet pretium rutrum, ante massa tristique dui, ut interdum quam neque sit amet ligula. Mauris gravida leo eu mauris luctus fringilla. Sed malesuada libero leo, in egestas turpis
laoreet eu. Aenean egestas imperdiet libero sit amet venenatis. Aliquam luctus tristique feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec hendrerit a nibh eu molestie. Nullam enim velit,
bibendum in est et, accumsan condimentum leo. Sed aliquam tempus dolor in imperdiet. Ut sed dignissim felis. Phasellus nec sagittis tortor, eu ultricies sapien. Nulla convallis ipsum eget purus aliquet euismod. Sed vitae arcu sed eros dignissim fermentum.
Integer egestas ultrices purus, ut pulvinar lacus pellentesque in. Vivamus neque ante, elementum nec lacus a, aliquam varius libero. Phasellus consequat, sem facilisis varius fringilla, tellus mi malesuada nulla, ac elementum enim ligula ut diam.
Maecenas feugiat libero dui, eget blandit orci faucibus non. Cras iaculis at metus lobortis iaculis. Etiam nec lobortis metus, in hendrerit lacus. Sed tincidunt scelerisque turpis, non tempus arcu blandit ac. Pellentesque interdum velit at enim porta
dapibus. Phasellus et accumsan nulla. Vestibulum augue erat, congue a sagittis dapibus, volutpat condimentum enim. Proin non ante eget eros scelerisque vestibulum id bibendum quam. Sed imperdiet vitae augue eget dapibus. Integer consectetur ut velit
vel tristique. Sed scelerisque elit felis, ut suscipit elit ultrices vitae. Sed blandit commodo dolor at pulvinar. Vestibulum id consectetur libero. Ut vestibulum pretium ipsum. Suspendisse ac fringilla urna. Aliquam egestas enim nibh, id tristique
nulla pharetra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel neque diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut congue lacus quis accumsan accumsan. Praesent nec
pellentesque mi. Etiam id lorem sed neque tempor imperdiet. Ut molestie velit eu pellentesque rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel lorem in nulla tristique auctor. Cras vitae
hendrerit neque. Aliquam accumsan porttitor malesuada. Fusce malesuada urna id tortor ultrices, at lobortis mauris faucibus. Sed eget enim volutpat, tempor libero ut, hendrerit justo. Pellentesque eu aliquet urna. Morbi laoreet metus suscipit aliquam
pellentesque. Suspendisse mattis ipsum sed mauris faucibus porttitor. Morbi posuere et nisl non euismod. Donec malesuada dapibus eros quis consequat. Duis non aliquet nisl, in pharetra nulla. Vestibulum venenatis risus ac elit scelerisque, a scelerisque
diam rutrum. Maecenas cursus sodales tortor id luctus. Sed eleifend lectus pharetra pulvinar sagittis. Morbi risus orci, molestie sit amet orci nec, aliquet iaculis enim. Suspendisse at lorem suscipit, rutrum odio in, gravida massa. Aliquam vitae
convallis ligula, a hendrerit nunc. Pellentesque tempor blandit ultrices. Curabitur hendrerit libero at adipiscing suscipit. Ut pretium consectetur tincidunt. Quisque facilisis quis enim id hendrerit. Cras aliquam mi orci, tristique porta arcu posuere
lobortis. Ut at felis molestie, pharetra ligula quis, venenatis quam. Integer sit amet sapien eget quam consectetur adipiscing. Sed sit amet ligula a ligula ultrices euismod. Aliquam fermentum, lorem a vehicula tempor, est erat semper ipsum, ac mollis
neque lacus non magna. Curabitur semper sem volutpat justo volutpat varius. Aenean placerat, justo aliquet lobortis scelerisque, libero ipsum tincidunt quam, at gravida augue lacus sit amet nunc. Sed tempor mattis aliquet. Proin vitae ante arcu. Donec
lobortis facilisis eros, vitae condimentum odio fermentum sagittis. Nunc imperdiet erat eget vehicula volutpat. Phasellus eget nulla in nisl vulputate dignissim. Sed tincidunt lectus ac molestie vestibulum. Duis hendrerit dolor a accumsan tempus.
Curabitur eget ante ut dolor vulputate pretium suscipit et lacus. Cras adipiscing est ultricies elementum gravida. Praesent consequat enim justo, sit amet posuere nunc sodales ut. Proin eget risus tempor velit iaculis molestie sit amet ac velit. Cras
in est at tortor lacinia rutrum. Pellentesque lobortis et dolor eget pellentesque. Cras id varius libero. Suspendisse vitae dui ut mauris imperdiet rutrum. Aliquam quis viverra dolor. Cras lacinia massa et dignissim luctus. Pellentesque et lobortis
metus. Etiam sed auctor felis, at cursus neque. Nam ut vehicula augue. Proin commodo aliquam dolor, molestie ullamcorper quam pretium eu. Sed semper, libero quis convallis consequat, leo est porttitor mi, quis blandit lorem lacus eu arcu. Etiam vel
sapien vel dolor facilisis elementum eu sed dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque sapien eros. Integer hendrerit magna non fermentum euismod. Mauris feugiat nisl elit, id viverra
nunc tempus non. Phasellus ut placerat ante. Pellentesque volutpat dolor in odio vulputate rhoncus. Maecenas suscipit placerat quam, ut aliquam velit volutpat a. Cras et turpis tellus. Sed vitae purus vitae orci condimentum suscipit eu non odio. Fusce
non leo eleifend, sagittis augue sed, laoreet dui. Integer adipiscing sapien auctor, luctus sem id, semper enim. Vestibulum facilisis justo vitae enim gravida consequat. Maecenas tempus, mi vitae convallis feugiat, lorem orci bibendum felis, a tincidunt
quam magna et nibh. Aenean tempus nec purus bibendum egestas. Pellentesque ut arcu et arcu aliquam bibendum sed quis est. Nunc pharetra sagittis eleifend. Quisque elementum tortor eget porta elementum. Vivamus ut eros ac nulla facilisis consequat.
Donec venenatis orci ipsum, at ultrices turpis interdum vel. Fusce vitae orci dolor. Morbi sodales eros eros, quis tempus est imperdiet a. Aenean ultricies lorem elit, a rhoncus neque mollis at. Fusce placerat sapien ut cursus condimentum. Nulla consequat
elementum vulputate. Pellentesque gravida volutpat tellus, ac hendrerit nulla sagittis sed. Ut nec turpis elit. Proin in pulvinar nisi. Donec ac condimentum velit. Sed et tortor non justo aliquam iaculis id eget sem. Pellentesque vulputate eu lectus
at ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at egestas sem, nec luctus augue. Mauris sagittis rhoncus bibendum. Morbi laoreet aliquet eros, adipiscing tempor mi vestibulum vitae. Duis massa arcu, aliquet semper
magna id, tristique adipiscing velit. Quisque id rhoncus quam, a euismod justo. Fusce eget ipsum non justo mattis feugiat in in nisi. Donec ac est vehicula, aliquet nisl sed, sodales nunc. Donec luctus ante nunc, in suscipit orci dignissim quis. Nulla
quis dolor rutrum, pharetra lacus a, facilisis ante. Phasellus a hendrerit tellus, eu viverra libero. Nulla luctus risus quis elementum placerat. Fusce rhoncus, purus vitae sollicitudin dapibus, massa nibh sodales nibh, a aliquet ante arcu id diam.
Donec egestas laoreet viverra. Vestibulum at risus a tellus imperdiet tincidunt. Suspendisse suscipit, odio eget ultricies consequat, tellus erat auctor sem, quis placerat quam mauris sit amet felis. Pellentesque aliquam at justo eget blandit. Vivamus
placerat risus et sagittis semper. Vivamus imperdiet vehicula pellentesque. In scelerisque quis mauris vel egestas. Proin eleifend lacinia sollicitudin. Pellentesque varius enim et felis pulvinar euismod. Nullam varius, lorem non commodo mollis, odio
eros posuere sapien, sed aliquam eros enim vel justo. Mauris eleifend porta molestie. Quisque vulputate, leo id tempus facilisis, neque nunc cursus ipsum, et ultricies dui massa quis nibh. Quisque consectetur justo ac venenatis cursus. Nullam ut sapien
ac velit lacinia fermentum vel eu sem. Quisque luctus ac eros vel sagittis. Quisque venenatis sem orci, eu dignissim nulla dignissim nec. Pellentesque eu elementum purus. Nulla placerat sodales lorem quis interdum. Vestibulum sodales ultricies dolor
vitae auctor. Phasellus vel diam purus. Nam eget libero pellentesque, sagittis elit et, pharetra lorem. Quisque elementum nibh et augue ornare, ac rutrum odio blandit. Maecenas ac turpis rutrum, elementum arcu vitae, pulvinar ante. Donec nisi dolor,
dictum at sagittis eget, ornare in erat. Curabitur velit leo, faucibus non turpis quis, suscipit pellentesque elit. Cras in venenatis orci. Maecenas blandit est id augue pellentesque, et faucibus sapien vulputate. Morbi sed molestie risus, sit amet
elementum felis. In non turpis nisi. Nunc bibendum sem sed metus ornare, ut volutpat sem aliquam. Aliquam bibendum adipiscing suscipit. Donec consectetur sem at arcu viverra, a tincidunt velit ullamcorper. Phasellus at metus mi. Proin rhoncus mattis
gravida. Suspendisse pellentesque pharetra turpis, sit amet facilisis orci adipiscing in. Fusce egestas nec nulla in scelerisque. Nulla congue pretium nibh, et scelerisque erat pretium eu. Aenean et nunc mauris. Morbi bibendum urna a aliquet suscipit.
Nunc pretium dapibus lacinia. Fusce dapibus mollis molestie. Nam at interdum metus, eu consequat est. Nulla a metus massa. Vivamus justo eros, tristique ut orci vitae, sollicitudin volutpat felis. Integer consequat justo metus, non adipiscing arcu
tristique in. Aliquam imperdiet ipsum id velit condimentum, sit amet aliquet neque ullamcorper. Nunc mi nibh, dignissim nec mauris sit amet, semper venenatis arcu. Phasellus a rhoncus turpis, interdum blandit metus. Cras sit amet posuere mauris. Donec
at fermentum elit. Praesent sagittis augue ipsum, sed pellentesque arcu tincidunt non. Ut eu purus consequat, adipiscing eros eu, suscipit metus. Sed eu mauris eu lacus feugiat venenatis ac ut velit. Nunc eget aliquam tortor, ac iaculis orci. Quisque quis sodales lectus. Nunc dui felis, aliquam luctus nisi malesuada, ultrices varius risus. Phasellus malesuada eros ut dictum consectetur. In adipiscing condimentum fermentum. Nullam ultrices purus ac dui lobortis vehicula. Donec et dapibus ligula, a bibendum nisl. In hac habitasse platea dictumst. Integer auctor massa vitae mauris fermentum rutrum. Sed urna ligula, tempus eget lectus ac, adipiscing consectetur diam. Cras quis eros vitae ipsum blandit sollicitudin. Curabitur eget ornare ligula, vel pellentesque ipsum. Aliquam volutpat imperdiet ipsum. Sed at orci sit amet nisl elementum pellentesque quis sed dolor. Aliquam nec sem vitae nulla pulvinar viverra. Mauris turpis ipsum, pretium eget neque vel, tempus tempor neque. Etiam malesuada dui sed dui malesuada venenatis. Duis rhoncus id felis in rhoncus. Donec at suscipit erat, sed elementum tortor. Nullam pulvinar, erat quis suscipit placerat, lectus lectus euismod enim, at sollicitudin odio metus at metus. Sed ut enim aliquet, varius enim sit amet, dapibus ipsum.</div>
Here is the Fiddle
I check it in my Ubuntu Chrome.
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
It looks like a known bug in Chrome:
https://code.google.com/p/chromium/issues/detail?id=99358
Btw, there is a related question on stackoverflow: CSS columns breaking when printing
I wanted to add a couple things here:
The Chrome Bug Referenced in Damien's answer is still not fixed yet.
Printing in FireFox works as expected.
Strangely enough, printing in IE11 works. The output is not the same as FireFox, but still yields expected results.
It's not working in chrome, firefox. you have only one solution. use IE for multi column print