三个垂直堆叠的DIV与滚动中间

是否有可能垂直堆叠三个DIV并只让中间的div垂直滚动？不过，我不想使用像素高度，因为DIV位于可调整大小的对话框内。像这样的东西（原谅我糟糕的ASCII艺术）：三个垂直堆叠的DIV与滚动中间

+-----------+ 
| Header | 
+-----------+ 
|   ^| 
|   || 
| Scroll || 
|   || 
|   v| 
+-----------+ 
| Footer | 
+-----------+

的目标是有页眉和页脚的固定，并作为对话的增长，中间的div将垂直增长。也许我只是在愚蠢，但是我在过去的几个小时里一直在为此而战，似乎无法做到。三个DIV可能需要在“另一个”DIV内，但是当我这样做时，将高度设置为100％，随着中等DIV的增长，它会增长。再说一遍，这可能是我没有考虑到的事情。我也试过用TABLE来无济于事。

感谢您的任何帮助。

来源

2010-06-10 Dave

是[此]（http://limpid.nl/lab/css/fixed/header-and -footer）你在找什么？ – zildjohn01 2010-06-10 02:28:58

这应该工作

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
</div>

编辑 - 对于固定位置的页眉和页脚在模态对话框

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;"> 
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
    </div> 
</div>

来源

2010-06-10 02:29:34

关闭，除了（如在其他答案）divs绝对定位。有没有一种方法使用“相对”定位到父元素？我想我可以开始制作全部的DIV绝对定位。 – Dave 2010-06-10 02:42:02

好，所以你有这些模态对话框，这是你的问题？正确？ – 2010-06-10 02:44:21

是的，我正在摆弄你现在发布的内容。将尝试编辑的版本。 – Dave 2010-06-10 02:46:50

重温这对于2017年有了Flexbox的，但是现在可以做而不必明确定义页眉和页脚的高度。至少在所有浏览器中都有效，目前除了IE < = 10之外，其他所有浏览器都有显着的市场份额，但仍有1-5％的份额，具体取决于您提出的问题。由于这通常是一种可视化/可用性机制，并且不会阻止功能，因此在这种情况下使用flexbox应该至少让您的页面可用于不受支持的浏览器的用户。

所有你需要做的是包裹在具有明确的高度（例如，身体或100％的高度上一个孩子）一个div您的标题，内容和页脚，与样式：

display: flex; 
    flex: auto; 
    flex-direction: column;

而且应用该样式的滚动窗格：

overflow-y: auto;

如果你想在滚动窗格增长因此使用所有的垂直空间：

flex-grow: 1;

和页眉和页脚（必要Safari和IE 10）：

flex-grow: 0;

https://jsfiddle.net/ornsk10a/

来源

2017-03-14 19:03:54

三个垂直堆叠的DIV与滚动中间

回答

相关问题