HTML/CSS：拉伸高度<；部门>；布局 顶部固定高度行 底部拉伸行（在这种情况下，高度应为500px。）

在没有javascript的情况下，创建两行布局的标准方法是什么？上面的一行是固定大小的，下面的一行延伸并适合其父div

• 我希望两行的样式都是独立的。我在这里找到了两种解决方案，但是如果我更改顶行的高度，那么底行的样式（例如边距）也需要随之更改

• 我不需要支持旧的浏览器。如果它是标准的，那就好了

---

谢谢

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

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

e、 g.一个非常简单的示例，其中顶行应具有红色背景，底行应具有黄色背景，将包含div的样式设置为具有底div所需的外观，并且顶div将覆盖容器上部的该外观：

<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> 

---

在这种情况下，您可以使用preprocessor（如LESS）：

---

您可以在CSS中使用

display

属性来修复此问题

工作

HTML

---

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

---

如果未指定div的高度，则它将自动适合内容，而不是容器。但是，如果您知道最上面一行是100，包含的div是600，为什么不简单地将最下面一行设置为height:500？我可能会经常修改高度，因此不想计算两次高度。其实我觉得依赖性不好。。谢谢你的评论。为什么你需要设置第二行的高度？这还不足以让它扩展到内容的大小吗？如果这与外观设计有关，请参见下面我的答案谢谢您的评论。我希望底部div自动填充父div的其余部分。我认为这是一种非常常见的布局，但我找到的解决方案需要明确指定剩余的500px。您需要编辑问题以指定您的全部要求，即底部div必须是固定大小，并且需要滚动。下面提供的所有答案都没有考虑到这一点，因为我们不知道这是您想要的。这是因为您没有指定内容将大于div，并且您需要一个垂直滚动条，所以我没有实现它以这种方式工作！正如我在回答中所说的，这取决于你试图实现的目标。为了获得准确的解决方案，您需要指定所有需求：）优化css以减少冗余：）@user1392013，在Chrome中仅供参考，jsfiddle链接中的代码结果与我的示例完全相同（没有考虑添加滚动条的额外需求）。我知道你不关心老浏览器，但你确实需要考虑Chrome。

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

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

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

<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> ​

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