动态和固定的div高度

我试图创建一个包含3个不同div的div：页眉，内容和页脚。页眉和页脚有固定的div，并位于容器div的顶部和底部。内容应填充剩余的可用空间，并在容器div被调整大小时动态调整，使用overflow：auto和与容器剩余空间相对应的最大高度。我该如何实现这种行为？动态和固定的div高度

#container 
    #header 
    #body 
    #footer 

#container { 
    display: table; 
    height: 300px; 
    width: 300px; 
} 

#container #header { 
    background: #888; 
    height: 30px; 
    width: 100%; 
    display: table-row; 
} 

#container #body { 
    background: #777; 
    display: table-row; 
    height: 100%; 
    max-height: 100%; 
    overflow: auto; 
    width: 100%; 
} 

#container #footer { 
    background: #888; 
    display: table-row; 
    height: 30px; 
    width: 100%; 
}

这是我已经有。这里的问题是#body不会接受任何最大高度参数，并根据其内容调整自身大小。演示http://jsfiddle.net/deHvH/1/，与jQuery UI可调整大小http://jsfiddle.net/deHvH/2/

编辑：flexbox模型是我所需要的。

来源

2012-04-14 Alexandre Kirszenberg

请提供您已有的代码。 – Albert 2012-04-14 10:02:32

我刚编辑我的问题。 – 2012-04-14 10:11:48

flexbox模型是我需要的！

#container { 
    display: table; 
    height: 300px; 
    width: 300px; 
    display: box; 
} 

#container #header { 
    background: #888; 
    height: 30px; 
} 

#container #body { 
    background: #777; 
    box-flex: 1; 
    overflow: auto; 
} 

#container #footer { 
    background: #888; 
    height: 30px; 
}

来源

2012-04-26 17:55:53

您可以使用以下CSS相应地调整最大高度。

#container { 
    height: 300px; 
    width: 300px; 
} 

#container #header { 
    background: #888; 
    height: 30px; 
    width: 100%; 
} 

#container #body { 
    background: #777; 
    max-height: 200px; 
    overflow: auto; 
} 

#container #footer { 
    background: #888; 
    height: 30px; 
    width: 100%; 
}

这是否解决了您的疑虑？

来源

2012-04-14 12:42:37 Albert

动态和固定的div高度

回答

相关问题