javascript - 如何创建一个随窗口调整大小的 div？

Question

我想使用 css 创建一个随窗口调整大小的 div。

Example:
   #container
    {
      margin: 3em;
    }
   #header {
     height: 100px;
   }
   #main {

   }
   #footer {
    height: 100px;
    bottom: 0px;
   }

   container
      header
      main
      footer

因此，当我调整窗口大小时，我希望 main 随窗口调整大小，而 header 和 footer 状态为 100px；

有没有办法使用 CSS 来实现，或者我将不得不使用 Javascript？

Answer 1

   html, body, #container, #main{
     width:100%;
     height:100%;
   }

   #container
    {
     margin: 3em;
     position:relative;
    }
   #header {
     height: 100px;
     position:absolute;
     z-index:1;
   }
   #main {
     position:absolute;
     top:0;
     left:0;

   }
   #footer {
    position:absolute;
    height: 100px;
    bottom: 0px;
     z-index:1;
   }

html
  body
   container
      header
      main
      footer

上面的代码应该给你你正在寻找的东西 #main 将覆盖整个屏幕，而你的 100 像素高的页眉和页脚位于它的顶部。我现在正在我的网站上使用此代码 http://patrickarlt.com .

位于整个屏幕的 div 顶部的页脚和页眉站点。您可能还想监听 resize 事件以在用户调整屏幕大小时调整#main 中的元素大小。

这在 IE 6 中不安全，但我最后检查过我的网站在 IE 7 和 8 中工作。