我想使用 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?
最佳答案
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 中工作。
关于javascript - 如何创建一个随窗口调整大小的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3945776/