HTML/CSS：拉伸高度 <div> 布局答案

【问题标题】：HTML/CSS: stretching height <div> layoutHTML/CSS：拉伸高度 <div> 布局
【发布时间】：2012-05-14 04:48:26
【问题描述】：

<div style="width: 800px; height: 600px"> 
    <div style="height: 100px"> 
        top fixed-height row
    </div> 
    <div style="???"> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div>

在没有 javascript 的情况下创建两行布局的标准方法是什么，其中顶部是固定大小，底部是拉伸并适合其父 div？

我希望两行的样式是独立的。我在这里找到了几个解决方案，但是如果我更改顶行的高度，则需要随之更改底行的样式（例如边距）。
我不需要支持旧浏览器。如果是标准的就好了。

谢谢！

【问题讨论】：

如果您没有为 div 指定高度，那么它会自动适应内容，而不是容器。但是如果你知道顶行是 100 并且包含的 div 是 600，为什么不简单地将底行设置为 height: 500？
我可能会经常修改高度，所以我不想计算两次高度。实际上我认为依赖关系不好..不过感谢您的评论。
为什么要设置第二行的高度——让它扩展到内容的大小还不够吗？如果与外观样式有关，请参阅下面的答案
感谢您的评论。我希望底部 div 自动填充父 div 的其余部分。我认为这是一个很常见的布局，但我发现的解决方案需要在某处明确指定剩余的 500px。
您需要编辑您的问题以指定您的全部要求，即底部 div 必须是固定大小并且需要滚动。下面提供的所有答案都没有考虑到这一点，因为我们不知道这就是您想要的。

标签： css html height stretching

【解决方案1】：

您可以在 CSS 中使用 display 属性来解决此问题。

工作EXAMPLE

HTML

<div id="a" style="width: 300px; height: 200px"> 
    <div id="b" style="height: 55%"> 
        top fixed-height row
    </div> 
    <div id="c" style=""> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div>

CSS

#a
{
    border: 1px solid black;
    display:table;
}
#b
{
    background-color:red;
    display:table-row;
}
#c
{
    background-color:green;
    display:table-row;
}

【讨论】：

:) 优化 css 以减少冗余 :)
@user1392013，在 Chrome 中仅供参考，jsfiddle 链接中的代码与我的示例完全相同（没有考虑到您添加滚动条的额外要求）。我知道您并不担心旧版浏览器，但您确实需要考虑 Chrome...

【解决方案2】：

对于这种情况，您可以使用预处理器（如 LESS）：

@contHeight: 600px;
@topHeight: 100px;

div#containingdiv { 
    width: 800px; 
    height: @contHeight; 
    }
div#toprow { 
    width: 100%;
    height: @topHeight; 
    }
div#bottomrow {
    height: @contHeight - @topHeight; 
    }

【讨论】：

【解决方案3】：

HTML 和 CSS 是静态而非动态语言，您可以在其中执行计算。您只能将样式单独应用于每个 div，因为实际上每个“行”div 的样式之间没有依赖关系，您可以根据另一个来确定其中一个的高度。

但是，根据您要实现的目标，可以设置包含 div 而不是底部 div 的样式。

例如一个非常简单的例子，顶行应该有红色背景，底行有黄色背景，将包含 div 的样式设置为底部 div 所需的外观，顶部 div 将在上部覆盖此外观容器的一部分：

div#containingdiv { width: 800px; height: 600px; background:#ffff00; }
div#toprow { height: 100px; background:#ff0000; width 100%; }
div#bottomrow { }

【讨论】：

那是因为你没有指定内容会大于 div 并且你需要一个垂直滚动，所以我没有实现它来这样工作！就像我在回答中所说的那样，这取决于您要达到的目标。要获得准确的解决方案，您需要指定所有要求

【解决方案4】：

我刚刚写了一篇关于 HTML CSS 布局的博客，该演示让您可以通过 javascript 操作大多数 css 设置。

http://attemptingawesomeness.blogspot.com.au/2012/05/css-html-layout-guide_13.html

http://attemptingawesomeness.blogspot.com.au/2012/05/ultimate-html-css-layout-demo.html

【讨论】：