Search code examples
htmlcssgoogle-chromematerial-design-lite

footer height is too small in Chrome

I'm looking here at the element footer.mdl-mini-footer. All given sizes were measured using F12 developer tools in Responsive Mode with a screen size of 768x884 (Chrome's Tablet breakpoint size).

In Firefox, the element footer.mdl-mini-footer has a size of width: 736px; height: 36px;.

In Chrome, the element footer.mdl-mini-footer has a size of width: 736px; height: 10.438px;.

The key point here is the height difference. In both browsers, the child element ul.mdl-mini-footer__link-list has a size of width: 268px; height: 36px;, causing the footer's content to sink beneath the footer element.

Note that the style="padding: 8px 16px" on the footer element is not required for this issue to occur, it just makes it more visible by cutting down on the default padding provided by Material Design Lite of 32px 16px. Specifically, the issue is that the footer's height decreases in Chrome as the page's content has to scroll more. This does not happen in Firefox, and is the desired behavior.

For completeness sake, I also tested the page in Microsoft Edge, which behaves exactly as Firefox. Also, changing Chrome's zoom level to 125% to better match Firefox's zoom level only exacerbates the problem with a new footer height of 8.297px.

Why does this happen only in Chrome, and how can I prevent it?

Stack Snippet in Firefox: Firefox

Stack Snippet in Chrome: 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>

Solution

  • 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.)