如何制作header/body/footer 'popup'具有可变高度主体的Div

How to make header/body/footer 'popup' div with variable height body?

本文关键字：高度 主体 Div header footer 何制作 popup body      更新时间：2023-09-26

我制作了一个弹出式div，它看起来像我网页上的一个经典窗口，可以最小化/调整大小/移动。

我需要它有一个25像素高的页眉，一个50像素高的页脚，然后窗口的主体总是采用"rest"，这是可变的，因为窗口可以调整大小。该窗口的主体动态更新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;
}
相关文章：