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

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

html css

Html 固定高度div顶部的可变高度div,html,css,Html,Css,如果可能，我想仅使用css和html创建以下布局： __________________________________ | ____________________________ | | | | | | | div1 variable height | | | | | | | | | | |

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

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

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

第二组应该一直呆在第一组下面

我试过这样做

HTML:

实例：

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

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

通过使用

calc

计算内容

div

的

max height

，您可以实现所追求的行为

仅供参考-您的fiddle与问题中的代码不相似…感谢您的评论，我编辑了我的问题，现在fiddle链接是正确的。第一个div应该仅扩展以适应其内容，而不是进一步。@IstvánGeréb-请参见（同上），情况就是这样？是的，这就是确切的情况。唯一的问题是，我将在没有calc函数的情况下完成这项工作。旧浏览器不支持calc。@IstvánGeréb-我担心calc是唯一的方法，我担心这将是答案。无论如何，感谢您的快速回复：）

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

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

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#div1 {
    width:100%;
    overflow:auto;
    background-color:green;
    max-height:calc(100% - 50px);
}
#div2 {
    width:100%;
    height:50px;
    background-color:red;   
}