1

我正在寻找一种方法来进行填充整个窗口的单列垂直布局。此布局包含三个组件：

  • 标头（常量，但大小未知）
  • 身体（可变尺寸，伸展填充）
  • 页脚（常量，但大小未知）

在页眉/页脚固定且已知大小之前，我已经完成了布局，但我希望它们现在具有动态大小（基于内容）。灵活的盒子模型似乎是为了让这件事变得简单，但我不知道如何让它工作（这可能是由于浏览器的支持）。

我现在只需要一个针对 FireFox 的解决方案，绝对最新的版本就可以了（比如 18 或 19）。

4

1 回答 1

0 
<!doctype html>
<html lang="en">
  <head>
      <title>Header/Footer Vertical Centering Test</title>
      <style type="text/css">
      /* Set document height*/
      html, body { height:100%; }

      /* Set container height and context */ 
      #container { position:relative; min-height:100%; }

      /* Declare positioned children of container */
      #masthead, #footer { position:absolute; }

      /* Position masthead */
      #masthead { top:10px; }

      /* Position and layer footer */
      #footer { bottom:0; z-index: 2; }

      /* Set fluid height for footer */
      #footer { height:5%; }

      /* Set padding for content header placeholder */
      #header { padding-bottom: 10%; }

      /* Set fluid height and display for middle container */
      #middle { height:60%; display:table; padding-bottom: 5%; }

      /* Set display and vertically centered content */
      #vertcenter { display:table-cell; vertical-align: middle; }
      </style>
  </head>

  <body>

    <div id="container">
      <div id="header"></div>

      <div id="middle">
        <div id="vertcenter">
            Content
        </div>
      </div>

      <div id="masthead">
      header
      </div>

      <div id="footer">
      footer
      </div>
    </div>

  </body>

</html>
于 2013-02-07T19:53:21.950 回答