Question

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

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

谢谢！

Answer 1

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

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

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

Answer 2

您可以在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;
}

Answer 3

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

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

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

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

Answer 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

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

4 个答案: