粘性灵活的页脚和标题CSS在WebKit中运行良好,但在Gecko中没有

Question

粘性灵活的页脚和标题CSS在WebKit中运行良好,但在Gecko中没有

The*_*rus 6 css firefox html5 css3 css-tables

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

我所拥有的适用于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>
      <section>
        Footer
      </section>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我不能为我的生活弄清楚为什么Firefox中的行为不同.中间的内容将正确扩展高度,但不会缩小超过内容的高度.

很难知道什么是正确的行为.有任何想法吗？

编辑

类似的例子设置在这里:http://jsfiddle.net/t3mZF/

有趣的是,如果.l-fit-height-row-content更改为display: table-cellWebKit和Gecko表现出相同的行为或忽略溢出.

如果display: block使用,则WebKit会提供所需的行为(滚动条和页脚保留在视图端口的底部),但Firefox拒绝添加滚动条,而是将页脚从屏幕底部推出(滚动条在视图端口上 - 而不是中间内容).

我还开了一张bugzilla票

Answer 1

The*_*rus 13

我已经发现了几个额外的div,并且display: inline-block在Firefox中也可以使用Torben提到的绝对定位技巧.这意味着完全灵活的页眉和页脚可以作为纯CSS解决方案.

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

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

      .l-fit-height-row {
        display: table-row;
        height:  1px;
      }

      .l-fit-height-row-content {
        /* Firefox requires this */
        display: table-cell;
      }

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

      .l-fit-height-row-expanded > .l-fit-height-row-content {
        height: 100%;
        width:  100%;
      }

      .l-scroll {
        /* Firefox requires this to do the absolute positioning correctly */
        display:    inline-block;
        overflow-y: auto;
        position:   relative;
      }

      .l-scroll-content {
        position: absolute;
        top:      0;
        bottom:   0;
      }
    </style>
  </head>
  <body>
    <div class="l-fit-height">
      <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
          Header
        </div>
      </section>
      <section class="l-fit-height-row-expanded">
        <div class="l-fit-height-row-content l-scroll">
          <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>
          </div>
        </div>
      </section>
      <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
          Footer
        </div>
      </section>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助

由于所有过度的课程名称,我发现这很乏味,我相信其他人也会这样.然而,这是一个非常有用的解决方案,我认为如果有人不使用它只是因为他或她在跟踪它时遇到了麻烦,那将是一种耻辱.因此,对于想要使用它的人来说,我已经更新了小提琴示例,我希望它更具语义性和更容易理解:http://jsfiddle.net/t3mZF/17/. (8认同)

归档时间：	14 年前
查看次数：	3879 次
最近记录：	9 年，4 月前