Question

我有两个简单的顶部和底部行，一个在另一个上面。点击时我有一个按钮，它将底行延伸到顶行，使底行成为唯一一行。

.container-fluid {
    .row.main-body {
        height: 100%;
        width: 100%;
        >div:first-child {
            position: absolute;
            left: 0;
            right: 0;
            height: 100%;
            transition: $transition-length;
            .row.bottom {
                max-height: calc(100% - 356px);
                height: 100%;
                transition: max-height 0.5 ease-in;
                &.hidedashboard {
                    max-height: 100%;
                    transition: max-height $transition-length ease-out;
                    height: -webkit-fill-available;
                    padding-bottom: 7em;
                }
             }
            .row.Top {
                height: 260px;
                transition: height 0.5 ease-in-out;
                &.hidedashboard {
                    height: 0;
                    overflow: hidden;
                }
                &:not(.hidedashboard) {
                    height: 260px;
                }
                .card {
                    max-height: 260px !important;
                }
            }
        }
    }
}

从上面的样式来看，.row.bottom是底行，而.row.Top是行顶部。

隐藏之前

循环按钮切换行。单击SHowDashboard时，row.top高度从0更改为260px。如果单击“隐藏显示板”，则高度从260px更改为0.

隐藏后

我的代码适用于chrome和IE 11。到目前为止在IE10中，当我们隐藏和显示时。顶部渲染blanc，只是白屏，尽管HTML在那里。隐藏时，我可以看到它显示由于转换延迟。请问我该如何解决这个问题？这仅在IE 10中发生

Answer 1

事实证明，ie10在变化的高度方面存在问题。因此，不是过渡两行，而是根据需要给顶部一个固定高度，然后将底行翻译成顶行。这样，高度不需要从高度：0变为高度：260px。所以基本上

.container-fluid {
    .row.main-body {
        height: 100%;
        width: 100%;
        >div:first-child {
            position: absolute;
            left: 0;
            right: 0;
            height: 100%;
            transition: $transition-length;
            .row.bottom {
                background-color: $gray-100;
                height: calc(100% - 356px);
                transition: all $transition-length ease-in-out;
                &.hidedashboard {
                    transform: translateY(-260px);
                    height: 100%;
                    height: -webkit-fill-available;
                    padding-bottom: 7em;
                }
             }
            .row.Top {
                height: 260px;
                .card {
                    max-height: 260px !important;
                }
            }
        }
    }
}

从上面的样式来看，.row.top既不翻译也不改变高度。 row.bottom垂直变换。当我们垂直转换到顶行的顶部时，它工作正常。感谢

在IE10中改变高度后消失的div

1 个答案: