Question

If you have a parent div that wraps a fixed height div and a 100% height div. However, the fixed height div overlaps it’s parent. Please check out this fiddle: http://jsfiddle.net/Wcgvt/.

Thank you!

Answer 1

I’ve forked your Fiddle and added some CSS here.

What you want to do is make your container (d3) position: relative so that you can use position: absolute on the overflowing container, like this:

.d3 {
    height:100%; 
    position: relative;
}

.d3-2 {
    max-height: 100%;
    overflow: auto;
    position: absolute;
    bottom: 0px;
    top: 54px;
    left: 0px;
    right: 0px;
}

Here, I’m setting top to 54px to push it down from the header, and every other dimension to 0px to push it to the edge. Change top: 54px to however high you header is.

The only caveat this method has is you have to set an explicit height for the header.

---

As an aside, I hope you’re using more sensible class names in your actual code; I lost track of which d is which a lot of times.