相关疑难解决方法(0)

有没有办法在不知道页脚大小的情况下使用CSS将页脚粘贴到浏览器屏幕的底部或内容之后(取决于哪个更长)？

现在我在一个容器中使用绝对定位,该容器保持页脚和容器的最小高度为100%的内容,但如果我更改页脚,我发现必须更改容器底部的填充以匹配其高度.

我正在尝试构建一个布局,允许灵活的高度页眉和页脚,中间的一个部分消耗剩余的空间.中间的任何溢出都应该为这个中间部分提供一个滚动条.

我所拥有的适用于Safari和Chrome的代码是:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      .l-fit-height {
        display: table;
        height: 100%;
      }

      .l-fit-height > * {
        display: table-row;
        height: 1px;
        background-color: red;
      }

      .l-fit-height-expanded {
        height: auto;
        background-color: blue;
        display: table-row;
      }

      .l-scroll-content {
        height: 100%;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <div class="l-fit-height">
      <section>
        Header
      </section>
      <section class="l-fit-height-expanded">
        <div class="l-scroll-content">
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
        </div>
      </section> …

我需要把一个棘手的页脚我的网页上,但我没有一个明确的高度,我的页脚设置.在较小的屏幕上 - 行调整大小,页脚变长.

因此,getbootstrap上提供的默认粘性页脚示例不起作用,因为它需要固定的页脚高度.

有没有办法实现这个？

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > …