在带有页脚的应用样式布局中使用 CSS calc()

Question

我正在尝试使用 CSS calc() 构建底部带有页脚的应用样式布局。

主要的 CSS 播放器：

.content-container {
    height: calc(100% - 110px);
    background-color: red;
    overflow: hidden;
}

.left, .right {
    float: left;
    height: 100%;
}

.left {
    width: 70%;
    background-color: blue;
}

.right {
    width: 30%;
    background-color: yellow;
}

.right-content {
    overflow: auto;
    height: 100%;
    margin-bottom: 30px;
}

以下是 HTML 的快速概览：

<div class="content-container">
<div class="left">
    <h1>left</h1>
</div>
<div class="right">
    <div class="right-title">
        TITLE OF THE SECTION
    </div>
    <div class="right-content">
        <div class="group">
        </div>
    </div>
</div>
</div>
<div class="footer"></div>

请在此处查看完整示例： http://codepen.io/woocas/pen/MwyBGd?editors=110

我正在尝试使 .right div（黄色）中的溢出占用 .content-container 的高度。

但正如您在示例中看到的那样，滚动条超出了内容容器分配给它的空间。它在页脚后面。

任何帮助将不胜感激。

Answer 1

您是否尝试将右侧列中的 CSS 高度设置为百分比值，因为它们嵌入在一个容器中，它们将始终以合适的方式呈现？

.right-title {
    background-color: gray;
    height: 65%;
}
.right-content {
    overflow: auto;
    height: 35%;
}

Answer 2

您可以在 .right 高度上再次计算并添加一个边距底部，这样 .right 就不会超出 页脚，但整个事情似乎有点过于复杂了。

    .right {
        width: 30%;
        background-color: yellow;
        height: calc(100% - 90px);
        padding-bottom: 90px;
    }