Question

我想使用div创建css，并使用窗口调整大小。

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

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

   container
      header
      main
      footer

因此，当我调整窗口大小时，我希望main在header和footer staty 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将覆盖整个屏幕，同时您的100px高页眉和页脚位于其顶部。我现在正在我的网站上使用此代码http://patrickarlt.com。

填充整个屏幕的div顶部的页脚和标题网站。当用户调整屏幕大小时，您可能还希望收听调整大小事件以调整#main中的项目。

然而，这不是IE 6的安全，但我的网站最后一次在IE 7和8中工作。

Answer 2

使用JavaScript，您可以在页面加载时更改div。有关详细信息，请参阅此文章：

dynamically resizing divs

Answer 3

我做过类似的事情，但也使用JavaScript来为我做这件事。它不是最优雅的JS，但它的工作原理。我使用了这个，当我有一个需要最大尺寸的div，它有一个侧栏，顶部和底部栏等。所以当浏览器窗口调整大小时，我不得不快速调整容器div（这是一个地图）。

你希望你的标记看起来像（我想你已经有了这个）：

<div id="container">
 <div id="title">Title</div>
 <div id="main"></div>
 <div id="footer></div>
</div>

脚本：

var browserWidth = 0;
var browserHeight = 0;

function getSize() {
  if( typeof( window.innerWidth ) == 'number' )
  {
    //Non-IE
    isIE = false;
    browserWidth = window.innerWidth;
    browserHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

    //They're not running IE7 / FireFox2. Older browser. Find some technology
    //to destroy their computer so they're forced to upgrade.
    browserWidth = document.body.clientWidth;
    browserHeight = document.body.clientHeight;
  }
}

function updateMapSize() {
    //IE7 is 21 pixels LESS than FireFox.
    //Pretty much we want to keep the map to the maximum size alloted.
    getSize();
    //top section
    var height = browserHeight - 200;

    document.getElementById("main").style.height = height;
    document.getElementById("container").style.height = browserHeight ;
    document.getElementById("container").style.width= browserWidth ;

    setTimeout("updateMapSize()", 250);

}

Answer 4

您不需要Javascript，请使用以下CSS代码：

#header { 身高：100px; 最大高度：100像素; }

#main { }

＃footer { 身高：100px; 最大高度：100像素; 底部：0px; }

如何创建一个用窗口调整大小的div？

4 个答案: