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

我想创建一个div使用css，调整窗口的大小。如何创建一个可以调整窗口大小的div？

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

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

    container 
     header 
     main 
     footer

所以，当我调整窗口的大小，我想main对窗口进行调整，同时header和footer staty 100像素;

有没有办法做到这一点使用CSS或我将不得不使用JavaScript？

来源

2010-10-15 Mark K

如果你把它设为'％'，它将随窗口大小调整，或者它是'auto'。否则是的，你必须钩入resize事件并相应地进行调整。 – Rudu 2010-10-15 20:21:43

屏幕分辨率更改时，resize事件不会触发。我知道这只是发生这种情况的一小部分实例...但如果它从未发生过，我不会提出它。你一直在告诉自己“他们为我的工作付出了代价”：P – 2010-10-15 20:45:08

使用JavaScript，您可以在页面加载时更改您的div。看到这篇文章的详细信息：

dynamically resizing divs

来源

2010-10-15 20:19:58

我做过类似，但使用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); 

}

来源

2010-10-15 20:30:32

你并不需要使用Javascript，如下面使用的CSS代码：

#header { height：100px; max-height：100px; }

＃主{ }

＃页脚{ 高度：100像素; max-height：100px; bottom：0px; }

来源

2010-10-15 20:45:42

我相信他希望主要是100％-200px。主要应该总是尽可能大。这就是我从他的问题中得到的结果。 – 2010-10-15 20:48:30

是的，我明白了。此外，他希望将此顶部页眉和页脚保持为100像素的高度。如果他想保持底部，你可以把位置：绝对;它会保持在底部。 #header {height：100px;最大高度：100像素; } ＃main {height：100％;最大高度：100％;最小高度：100％; } ＃footer {height：100px;最大高度：100像素; bottom：0px;位置：绝对的; } – 2010-10-15 20:53:30

as @Ryan提到，主要必须从页脚 – 2010-10-15 21:00:44

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上工作，最后我检查了。

来源

2010-10-16 01:15:58

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

回答

相关问题