Question

我在主体'容器'div内部，在这个'容器'div里面有三个div，'header'，'content'和'footer'我的问题是，我希望'content'div到随着内容的增加而垂直扩展，并且当'content'div扩展时，'footer'将被向下推。所有这一切都在主'容器'div中完成，所以它也垂直扩展！？

HTML

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
      <title>Untitled Page</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <div id="container">
         <div id="header"></div>
         <div id="content"></div>
         <div id="footer"></div>
     </div>
</body>
</html>

CSS

body
{
    background-color:Gray;
}
#container
{
    border: dotted;
}
#content
{
    border:dotted;
}
#header
{
    border:dotted;    
}
#footer
{
    border:dotted;
}

Answer 1

您可以使用CSS属性min-height来实现此目的，但您必须考虑在所有（旧版）浏览器中不支持它。

以下是一个示例：http://jsfiddle.net/YS9XV/1/

Answer 2

除非你另有说明，否则这就是事情的表现。

（不要在任何东西上设置高度，这是此类事物的关键'，否则'（如果你认为你想要的话，那么请寻找最小高度）。）

Answer 3

这可能就是您要找的内容：http://wildreason.com/images/liquid-layout-css.png

中心的两列将保持各自的高度，因为一个或另一个垂直扩展。

HTML DIVS动态扩展内容？

3 个答案: