Question

粘性页脚图案确保页脚粘贴到视口底部，除非非页脚内容足够高，在这种情况下它会被推到视口底部以下。

此模式的以下应用适用于Chrome和Opera，但不适用于Firefox。我错过了什么吗？

     #container {
       min-height:100%;
       position:relative;
     }

     #non-footer {
       padding-left: 1em;
       padding-right: 1em;
       padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
     }

     #footer {
       position: absolute;
       right: 0;
       bottom: 0;
       left: 0;
       margin: 50px 0 0 0 ;
       height: 100px;
       background: brown;
     }

  <body>
    <div id='container'>
      <div id='non-footer'>
        <h1>Sticky footer pattern</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
        </p>
      </div>
      <div id='footer'>
      </div>
    </div>
  </body>

令人惊讶的是，即使它适用于Chrome（当我将HTML放入文件中时），它也无法在完整页面模式下在Stack Overflow的HTML笔设施中正确显示 - 即使我仍在使用Chrome。相反，观察到的是页脚从视口底部升起。这与在Firefox下观察到的完全相同的故障模式。

Answer 1

您可能希望查看与vh ...

相关联的display: flex单元

＆＃13;

html,body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh; /* make the container at least the height of the viewport */
  display: flex; /* use flexbox */
  flex-direction: column; /* use a vertical flex layout */
}

.content {
  flex-grow: 1; /* expand to fill remaining container height */
  background-color: #e9e9e9;
}

.footer {
  background-color: #ccc;
  height: 100px;
}

＆＃13;

<div class='container'>
  <div class='content'>
    <h1>Content</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
    porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus
    ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
    lorem.
  </div>
  <div class='footer'>Footer</div>
</div>

＆＃13;

Answer 2

将你的html，身高设置为100％

html, body
{
  height:100%;
}

html, body
{
  height:100%;
}

#container {
  min-height: 100%;
  position: relative;
}

#non-footer {
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 150px;
  /* 100px + 50px (#footer::height + #footer::margin-top) */
}

#footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 50px 0 0 0;
  height: 100px;
  background: brown;
}

<body>
  <div id='container'>
    <div id='non-footer'>
      <h1>Sticky footer pattern</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
        porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis
        purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
        lorem.
      </p>
    </div>
    <div id='footer'>
    </div>
  </div>
</body>

指针：Sticky Footer - CSS Tricks

Answer 3

基于this answer我最终添加了以下特定于Mozilla的修补程序：

barChartView.rightAxis.removeLimitLine(self.limitLine)

@-moz-document url-prefix() { html { height: 100%; } body { height: 95%; } }是必要的，就好像指定了95%一样，然后页脚的底部会在Firefox中被裁剪（不知道为什么）。

＆＃13;

100%

＆＃13;

     @-moz-document url-prefix() {
       html {
         height: 100%;
       }
       body {
         height: 95%;
       }
     }

     #container {
       min-height:100%;
       position:relative;
     }

     #non-footer {
       padding-left: 1em;
       padding-right: 1em;
       padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
     }

     #footer {
       position: absolute;
       right: 0;
       bottom: 0;
       left: 0;
       margin: 50px 0 0 0 ;
       height: 100px;
       background: brown;
     }

＆＃13;

这也适用于Firefox，但不适用于Stack Overflow HTML / CSS代码段（在全屏模式下）。

在Chrome中工作的粘性页脚模式但不是Firefox

3 个答案: