如何创建一个可以调整窗口大小的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?
我做过类似,但使用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);
}
你并不需要使用Javascript,如下面使用的CSS代码:
#header { height:100px; max-height:100px; }
#主{ }
#页脚{ 高度:100像素; max-height:100px; bottom:0px; }
我相信他希望主要是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上工作,最后我检查了。
如果你把它设为'%',它将随窗口大小调整,或者它是'auto'。否则是的,你必须钩入resize事件并相应地进行调整。 – Rudu 2010-10-15 20:21:43
屏幕分辨率更改时,resize事件不会触发。我知道这只是发生这种情况的一小部分实例...但如果它从未发生过,我不会提出它。你一直在告诉自己“他们为我的工作付出了代价”:P – 2010-10-15 20:45:08