Question

我尝试使用CSS calc（）来构建一个App Style布局，底部有一个页脚。

主要的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的高度。

但正如您在示例中所看到的，滚动条超出了content-container分配给它的空间。它位于页脚后面。

非常感谢任何帮助。

Answer 1

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

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

Answer 2

您可以在 .right 高度上执行另一个计算并添加一个margin-bottom，以便 .right 不会超出页脚，但整件事似乎有点过于复杂。

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

在带有页脚的应用程序样式布局中使用CSS calc（）

2 个答案: