CODEWITHSUNDEEP
htmlcsstagsinternet-explorer-11
hari
hari

Reputation: 1377

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

I have a parent <div> tag and it's child <div> tag.

The height of the child <div> tag is dynamic and varies depending upon certain logic.

The height of the parent <div> tag should also vary depending upon the height of the child <div> tag and this is happening in browsers like Chrome, Firefox and Opera, but not in IE11. This is making the UI look like the child <div> tag is going beyond the parent <div> tag at the bottom of the page.

My question is- Is there a way I can make sure that child <div> tag remains within the boundaries of the parent<div> tag?

UPDATE: adding 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;
}

Upvotes: 0

Views: 858

Answers (1)

user2906608
user2906608

Reputation: 123

set .parent height to auto not 100%, i.e:

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

Upvotes: 1

Related Questions