我在我的网页上制作了一个看起来像经典窗口的弹出式 div,可以将其最小化/调整大小/移动。
我需要它有一个 25 像素高的页眉,一个 50 像素高的页脚,然后窗口的主体始终采用“休息”,这是可变的,因为窗口可以调整大小。该窗口的主体使其 DOM 动态更新,其中可以添加元素。如果添加了足够多的元素,它们的组合高度超过了分配给窗口主体的高度,那么这个主体区域应该开始滚动,当用户滚动时,页脚始终保持在原位——它只是滚动的主体内容。
如何使用 CSS、jQuery 实现这一点并且它与 IE8 兼容?
代码基本上应该是这样的:
<div id="wrap">
<div id="header">
... 25 px high space fixed to the top
</div>
<div id="body">
... stretches to fill the space available height/width ...
... scrollbars available when the body content exceeds height available ...
... jQuery allows user to resize the whole window, so this body should always fill ...
</div>
<div id="footer">
... 50px footer with controls, must always be fixed to bottom of window ...
... must never move no matter if the user scrolls the body ...
</div>
</div>
能否实现跨浏览器? IE8+、Firefox、Chrome?
最佳答案
在此处尝试演示 http://jsfiddle.net/XfPAG/4/ .这个想法是使用绝对位置:
HTML
<div id="wrap">
<div id="header">
... 25 px high space fixed to the top
</div>
<div id="body">
... stretches to fill the space available height/width ...
... scrollbars available when the body content exceeds height available ...
... jQuery allows user to resize the whole window, so this body should always fill ...
</div>
<div id="footer">
... 50px footer with controls, must always be fixed to bottom of window ...
... must never move no matter if the user scrolls the body ...
</div>
</div>
CSS:
#wrap, #header, #body, #footer {
position: absolute;
left: 0;
right: 0;
}
#wrap {
top: 0;
bottom: 0;
}
#header {
height: 25px;
top: 0;
}
#footer {
height: 50px;
bottom: 0;
}
#body {
top: 25px;
bottom: 50px;
overflow: auto;
}
关于javascript - 如何制作具有可变高度主体的页眉/主体/页脚 'popup' div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14227643/