Question

我正在寻找元素footer.mdl-mini-footer。所有给定尺寸均使用响应模式下的F12开发人员工具进行测量，屏幕尺寸为768x884（Chrome的平板电脑断点大小）。

在Firefox中，元素footer.mdl-mini-footer的大小为width: 736px; height: 36px;。

在Chrome中，元素footer.mdl-mini-footer的大小为width: 736px; height: 10.438px;。

这里的关键点是高度差。在这两种浏览器中，子元素ul.mdl-mini-footer__link-list的大小为width: 268px; height: 36px;，导致页脚内容下沉到footer元素下方。

请注意，要发生此问题，页脚元素上的style="padding: 8px 16px"不是，它只是通过减少Material Design Lite提供的默认填充来使其更加明显。 32px 16px。具体来说，问题是页脚的高度在Chrome中会降低，因为页面的内容必须滚动更多。这个不会在Firefox中发生，并且是理想的行为。

为了完整起见，我还测试了Microsoft Edge中的页面，其行为与Firefox完全相同。此外，将Chrome的缩放级别更改为125％以更好地匹配Firefox的缩放级别只会加剧新的页脚高度为8.297px的问题。

为什么这只发生在Chrome中，我该如何预防呢？

Firefox中的Stack Snippet：

Chrome中的

Stack Snippet：

＆＃13;

<!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>

＆＃13;

Answer 1

将页脚放在 <main>元素中。所有页面内容都在mdl-layout__content元素内。否则，布局javascript将变得混乱，并且事情不会按预期工作（正如您所看到的那样）。

Answer 2

此解决方案保留了固定页脚＆＃34;我在问题中有。这意味着无论页面上有多少内容，页脚始终显示在屏幕底部。

答案https://docs.python.org/2/library/stdtypes.html#boolean-operations-and-or-not建议将页脚放在内容元素中。这应该被认为是唯一官方支持的布局。但是，它会将页脚推到页面底部，这不是我想要的行为。

在使用不同的粘性和固定页脚解决方案后，我发现将0 0 auto footer应用于flex-shrink，让Chrome与Firefox一样。似乎flex为1，Chrome在此位置缩小了页脚，Firefox没有，而0 1 auto的默认值为.footer { -webkit-flex: none; -ms-flex: none; flex: none; }，这导致在这个位置上，页脚会在Chrome上出错而不是Firefox。

<强> TL; DR：

.footer {
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

<!-- begin snippet: js hide: true console: true -->

＆＃13;

<!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>

＆＃13;

{{1}}

＆＃13;

Answer 3

如果mdl-layout_content中的主要内容不足以滚动，Garbee的答案无法解决问题：mdl-mini-footer不会位于页面底部。

要确保即使您没有内容，mdl-mini-footer也会粘在您的页面底部（例如，如果您有动态内容），请确保将页脚放在另一个main元素中：

<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>

Answer 4

您在display: flex;上使用了.mdl-mini-footer，这会产生问题，将其移除并且高度可以正常

Chrome中的页脚高度太小

4 个答案: