我有两个简单的顶部和底部行,一个在另一个之上。单击时我有一个按钮,它将底行延伸到顶行,使底行成为唯一的行。
.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。如果 HideDashboard 被点击 高度从 260px 变为 0。
隐藏后
我的代码适用于 chrome 和 IE 11。到目前为止,在IE10中,当我们隐藏和显示时。尽管存在 HTML,但顶部呈现空白,只是白色屏幕。隐藏时,由于过渡延迟,我可以看到它显示出来。请问我该如何解决这个问题?这仅在 IE 10 中发生
最佳答案
事实证明 ie10 有不同高度的问题。所以我没有过渡两行,而是根据需要给顶部一个固定高度,然后将底部行平移到顶部行上。这样高度就不需要从 height: 0 更改为 height: 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 改为垂直变换。当我们垂直变换到顶行的顶部时,它工作正常。谢谢
关于javascript - 在 IE10 中改变高度后消失的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50013661/