Html 如何定位DIV以填充页眉DIV和页脚DIV之间的所有可用空间？

假设我有一个父DIV，里面有三个子DIV：header、content和footer。标头附着到父对象的顶部并水平填充。页脚附着在父对象的底部，并水平填充。内容应该填充页眉和页脚之间的所有空间

父对象必须具有固定的宽度和高度。content DIV必须填充页眉和页脚之间的所有可用空间。当内容DIV的内容大小超过页眉和页脚之间的空间时，内容DIV应显示滚动条并允许适当的滚动，以便页脚内容不会被遮挡，页脚内容也不会被遮挡

现在是最难的部分：你事先不知道页眉和页脚的高度（例如页眉和页脚是动态填充的）。如何在不使用JavaScript的情况下定位内容

例如：

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
    <div style="background-color: #80ff80; position : absolute; left : 0; right : 0; top : 0;">
    header 
    </div>
    <div style="background-color: #8080ff; overflow : auto; position : absolute;">
    content (how to position it?)
    </div>
    <div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
    footer 
    </div>    
</div>

标题
内容（如何定位？）
页脚

---

为了进一步澄清此事件-我尝试实现的目标布局将在业务web应用程序中使用父DIV将有一个固定但未知的大小（例如，它将正好是浏览器视口的大小，根据用户调整浏览器窗口的大小来调整自身大小）。让我们把父DIV称为“screen”

标题将包含一组筛选控件（如文本框、下拉列表和“筛选”按钮），如果水平空间不足，则应将其换行到下一行（因此其高度可以随时更改以适应换行）标题应始终可见，并附着在“屏幕”的顶部

页脚将包含一组按钮，如对话框窗口上的按钮。如果水平方向上没有足够的空间，这些也可以换行到下一行页脚必须附在“屏幕”的底部，以便随时可以访问和看到

内容将包含“屏幕”内容，如对话框字段等。如果字段太少，其余内容将为“空白”（在这种情况下，页脚不应紧跟在内容之后，但仍会附着在固定大小的“屏幕”底部）。如果字段太多，内容DIV将提供滚动条来访问隐藏的控件（在这种情况下，内容DIV不能延伸到页脚下方，因为滚动条将部分隐藏）

---

我希望这能进一步澄清这个问题，因为我的销售代表太少，无法向您的销售代表发表评论。

绝对定位会把您搞砸。试着这样做：

HTML:

---

编辑：也许我误解了，您是希望所有东西都能放入200x200px的盒子，还是希望盒子增加高度以适应内容？

家长是否需要保持固定高度

<div style="position : relative; width : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80;">
header 
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
</div>
<div style="float: left; clear: left; background-color: #ff8080;">
footer 
<BR />taller
</div>    

标题
内容（如何定位？）

更高

更高

更高

更高

更高

更高

更高

更高
页脚

更高

如果父对象的高度是固定的，那么这是我所知道的最接近它的方法——如果那些色块（与文本相反）真的很重要，并且不仅仅是为了说明div的边界，那么仍然不完全正确：

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80; ">
header <BR .> taller
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)<BR /> and another line
</div>
<div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
footer <BR /> taller
</div>    

收割台更高
内容（如何定位？
和另一行
页脚
更高

---

我会为此感到沮丧，但这听起来像是一份工作

---

您要做的是将三个相邻div的总高度设置为一个单位，而高度为100%的1x3表格实际上是一个更干净的解决方案。

是否需要更改中间div的大小？如果您只是想确保其背景（#8080ff）出现在页眉和页脚之间，为什么不让包含div的背景为#8080ff呢。页眉和页脚背景将覆盖该内容，而div的其余背景将是正确的。

如果您可以避免主内容不可滚动，则最好使用该方法确保页脚位于屏幕底部或内容底部（如果内容超出屏幕底部）。

纯CSS解决方案1-Flexbox： 您可以使用CSS3

display:flex；

属性（）创建一列以这种方式运行的div

使用包装器，您可以将列中的所有内容与

flex-direction:column；

声明对齐，然后用

justify-content:space-between；

和

height:100vh；

填充垂直空间。然后，您只需使用

flex:1 0；

使内容元素展开，并给它一个滚动条h

overflow-y:auto；

关于浏览器支持的注意事项-虽然大多数现代浏览器都支持flexbox，但仍有一些限制（请参阅：）。我建议使用

-webkit-

和

-ms-

前缀

---

工作示例：请参阅以下代码段和此示例

正文{
显示：-webkit flex；/*Safari 6.1+*/
显示：-ms flex；/*IE 10*/
显示器：flex；
-webkit弹性方向：列；/*Safari 6.1+*/
-ms柔性方向：列；/*IE 10*/
弯曲方向：立柱；
-webkit内容：介于；/*Safari 6.1+之间的空格*/
-ms-justify-content:space-between；/*IE 10*/
对齐内容：页眉顶部与页脚底部之间的间距；/*页眉顶部与页脚底部之间的间距*/
高度：100vh；/*填充视口高度*/
}
主要{
-webkit flex:10；/*Safari 6.1+*/
-ms flex:10；/*IE 10*/
flex:1 0；/*增长以填充空间*/
溢出-y:自动；/*添加scro
<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80; ">
header <BR .> taller
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)<BR /> and another line
</div>
<div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
footer <BR /> taller
</div>