IE11 子 <div> 标签在页面底部溢出

Question

我有一个父 <div> 标签和一个子 <div> 标签。

子 <div> 标签的高度是动态的，根据特定逻辑而变化。

父 <div> 标签的高度也应根据子 <div> 标签的高度而变化，这种情况发生在 Chrome、Firefox 和 Opera 等浏览器中，但是不在 IE11。这使得 UI 看起来像子 <div> 标签超出了页面底部的父 <div> 标签。

我的问题是-有没有办法确保子 <div> 标签保持在父 <div> 标签的边界内？

更新：添加css...

.child {
    background: none repeat scroll 0 0 #F6F6F6;
    border: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    min-height: 749px;
    background-color: white;
    display:table;
    float:right;
    min-width: 900px;
    position:absolute;
    overflow: visible;
    height:100%;
}

.parent {
    overflow: visible;
    min-height: 100%;
    height: 100%;
    padding: 13px 25px 75px 25px;
    min-width: 900px;
}

Answer 1

将 .parent 高度设置为自动而不是 100%，即：

.parent {
    overflow: visible;
    min-height: 100%;
    height: auto;
    padding: 13px 25px 75px 25px;
    min-width: 900px;
}

IE11 子 <div> 标签在页面底部溢出

IE11 child <div> tag overflowing at the bottom of the page

html

css

tags

internet-explorer-11