两个固定div之间的垂直溢出动态高度答案

【问题标题】：Vertical overflow dynamic height between two fixed divs两个固定div之间的垂直溢出动态高度
【发布时间】：2014-12-08 18:21:53
【问题描述】：

所以我有这个高度封闭的布局（不是我的决定），它包含一个表格，如果需要，它需要在任何方向上滚动。如果兄弟姐妹和父母的位置不是固定的、绝对的和相对的，那么设置高度就不成问题了。

问题在于，一旦.controls div 的高度扩大（当视口调整为更小的尺寸时），滚动条的一部分就会被.footer 覆盖并且无法单击。如果那里有水平滚动条，它也会被完全覆盖。

.filter-table {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 30px); // hmm!
    float: left;
    overflow: auto;
    background-color: rgba(25,125,100,0.1);
}

table {
    border-collapse: collapse;    
    width: 100%;
}

http://jsfiddle.net/zv2cdv9z/

有什么想法吗？

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

我对页脚样式进行了一些调整，将位置从固定更改为绝对，并设置了底部：-10px。这让用户可以向上或向下滚动，这样页脚就不会永久阻止任何内容，如下所示：

.footer {
    position: absolute;
    bottom: -10px;
    left: 0px;
    right: 0px;
    height: 30px;
    background-color: #ddd;
    color: #fff;
}

见http://jsfiddle.net/dfLfvha1/1/

【讨论】：