Daniel Rivas Daniel Rivas - 1 month ago 6
HTML Question

Material Design Lite sticky mini-footer truncated when used in flex container

I am trying to implement a sticky footer within the material design lite framework. I have chosen to do this using flexbox since MDL uses it already and it is the most flexible and hack-free method I know.



main.main-layout {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.page-content {
/*min-height: 500px;*/
}

div.mdl-layout__container{
height:auto;
}

<html>

<head>
<link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
</head>

<body>
<div class="mdl-layout mdl-js-layout mdl-layout--no-drawer-button">
<header class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top" id="djpsych-header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row" id="djpsych-header__top-row">
<div class="mdl-layout-spacer"></div>
<span class="mdl-layout__title"> Title of the site </span>
<div class="mdl-layout-spacer"></div>
</div>
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
some kind of navbar element
<div class="mdl-layout-spacer"></div>
<a id='top'></a>
</div>
</header>

<main class="mdl-layout__content main-layout">
<div class="page-content">
<p>This is the content of the page!</p>
<p>This is the content of the page!</p>
<p>This is the content of the page!</p>
<p>This is the content of the page!</p>
<p>This is the content of the page!</p>
<p>This is the content of the page!</p>
<p>This is the content of the page!</p>
<p>This is the content of the page!</p>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__middle-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a>
</li>
<li><a href="#">Privacy & Terms</a>
</li>
</ul>
</div>
</footer>
</main>
</div>
</body>

</html>





The header may not render on the small preview screen. You can see that the bottom half of the footer gets truncated. This only happens when the content is taller than the viewport, otherwise the sticky footer fix works fine (try changing the
min-height
of the
.page-content
rule). I have noticed that in those cases, the height of the footer content becomes 0, but when the content of the
<div class="page-content">
does not fill the viewport, then the footer actually has a height. Is this a bug?

Note that the html of the footer is taken directly from the MDL docs.

http://codepen.io/rivasd/pen/PGagLP

Answer

Material Design Lite sets .mdl-layout__container's height to 100%, impeding the ability of the inner elements to grow. This causes .page-content to overflow out of .mdl-layout__content, leaving zero room for the footer.

Get rid of that troublesome height!

.mdl-layout__container {
    height: auto;
}
Comments