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

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

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

谢谢！

4

4 回答 4

1

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

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

div#containingdiv { 
    width: 800px; 
    height: @contHeight; 
    }
div#toprow { 
    width: 100%;
    height: @topHeight; 
    }
div#bottomrow {
    height: @contHeight - @topHeight; 
    }
于 2012-05-14T05:38:43.323 回答
1

您可以使用displayCSS 中的属性来解决此问题。

工作示例

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;
}​
于 2012-05-14T05:38:46.643 回答
0

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 { }
于 2012-05-14T05:13:11.517 回答
0

我刚刚写了一篇关于 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

于 2012-05-14T07:01:37.443 回答