Css 2个div，具有固定高度和绝对定位div中的液体高度

html

具有固定高度的“Header”div正在移动“Content”div，因此我们看不到“END”字符串。没有js的解决方案

---

1解决方案是使集管和内容物div都达到液体高度，例如10%和90%。在我的情况下，它是不合适的。

降低

内容的
高度
，使内容可见


.Content 
{
    overflow:auto; 
    height:96%; /* based on height of header */
    background:#f1f1f1;
    margin-bottom: 30px;
}

要使其看起来更通用，以匹配所有屏幕高度：

 height : calc(100% - 30px);

我已将
.InfoPanel
样式更改如下。看看这是不是你想要的

.InfoPanel 
{
    height: 100%;
    overflow: hidden;
    padding-bottom:30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}

您可以使用CSS3计算功能：

.Content 
{
    overflow:auto; 
    height: calc(100% - 30px);
    background:#f1f1f1;
}

对于较旧的浏览器支持，还应包括：

/* Firefox */
height: -moz-calc(100% - 30px);
/* WebKit */
height: -webkit-calc(100% - 30px);
/* Opera */
height: -o-calc(100% - 30px);

另一种方法是更改
.Content
css

.Content {
overflow: auto;
background: #f1f1f1;
position: absolute;
right: 0px;
bottom: 0px;
top: 30px; /* .Header's height */
left: 0px;
}

演示
您可以使用
高度：calc（100vh-30px）
进行
内容
类。Im的浏览器兼容性不确定您想要归档什么，因为问题中的信息是scarse，但删除溢出：隐藏；显示结束字符串
/* Firefox */
height: -moz-calc(100% - 30px);
/* WebKit */
height: -webkit-calc(100% - 30px);
/* Opera */
height: -o-calc(100% - 30px);

.Content {
overflow: auto;
background: #f1f1f1;
position: absolute;
right: 0px;
bottom: 0px;
top: 30px; /* .Header's height */
left: 0px;
}