Demo Fiddle

Question

如果可能，我想仅使用css和html创建以下布局：

 __________________________________
|   ____________________________   |
|  |                            |  |
|  |   div1  variable height    |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|   ----------------------------   |
|   ____________________________   |
|  |                            |  |
|  |     div2   (50px height)   |  |
|   ----------------------------   |
|                                  |
|                                  |
|                                  | 
|                                  |
 ---------------------------------

div1具有可变高度，应随着内容的增长而扩展，如果没有更多空间，则应显示垂直滚动条。

div2始终保持在div1下

我试过这个

HTML：

<body>
    <div id="div1">div1
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content</div>
    <div id="div2">div2</div>
</body>

CSS：

#div1 {
    width:100%;
    overflow:auto;
    background-color:green;
}
#div2 {
    width:100%;
    height:50px;
    background-color:red;
}

实例：http://jsfiddle.net/xucqF/16/

这里的问题是，如果视口不够大，无法容纳所有内容，则滚动条会显示在整个主体上而不是div1本身。

Answer 1

使用问题中的代码，您可以使用以下CSS。

通过使用calc计算内容max-height的{{1}}，您可以实现您之后的行为。

Demo Fiddle

div

固定高度div顶部的可变高度div

1 个答案:

Demo Fiddle