Question

我正在建立一个利用CSS3功能计算的响应式网站。基本思路是在窗户高度改变时保持结构的高度完整。带有类＆＃34; componentContent＆＃34;的div应该根据周围的元素改变它的大小。当此div内的内容溢出时，应出现一个滚动条，内容变为可滚动。

使用Firefox，这种结构可以完美运行，而Chrome使用起来并不流畅，但仍然有效。问题出在IE上（试用版本11）。使用IE calc函数似乎不起作用和＆＃34; componentContent＆＃34; div不会根据窗口高度改变其高度。

我也在寻找实现类似结构和功能的其他方法。如果有人知道如何改进这个解决方案或以完全不同的方式做到这一点，那我就是在倾听！

结构如下所示：

<html>
    <body>
        <div class="menu">

        </div>
        <div class="container">
            <div class="content">
                <div class="componentHeader">
                    Component header
                </div>
                <div class="componentContent">
                    <div style="height: 150px;">
                        contents...
                    </div>
                </div>
                <div class="componentFooter">
                    Component footer
                </div>
            </div>
            <div class="footer">

            </div>
        </div>
    </body>
</html>

CSS分别如下所示：

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
}

body * {
    box-sizing: border-box;
}

.menu {
    width: 100%;
    height: 100px;
    border: 2px solid black;
}

.container {
    width: 100%;
    height: calc(100% - 100px);
    border: 2px solid blue;
    position: relative;
}

.content {
    width: 100%;
    height: calc(100% - 50px);
    border: 2px solid green;
}

.componentHeader {
    height: 50px; 
    width: 100%; 
    border: 5px dotted black;
}

.componentContent {
    height: auto; 
    width: 100%; 
    border: 5px dotted black; 
    top: 0px; 
    overflow-y: auto; 
    max-height: calc(100% - 100px);
}

.componentFooter {
    height: 50px; 
    width: 100%; 
    border: 5px dotted black;
}

.footer {
    width: 100%;
    height: 50px;
    border: 2px solid red;
    position: absolute;
    bottom: 0px;
}

JSFiddle的情况：https://jsfiddle.net/Visa/ufnzwdce/11/

P.S。如果有人对这种情况有更好的实施，请告诉我！

IE没有使用CSS3 calc函数更新DOM

0 个答案: