Min - height with the child in the position: absolute

Question

I have a container div with a child div to set absolute relative to its parent. The div container has its minimum height, however, when the height of the child div expands above the height of the parent parent, stretch it. This is due to the absolute positioning of the child. Are there any ideas how I can get a parent to stretch with a child as his height increases.

#parent{ position:relative; min-height:200px; width:200px; } #child{ position:absolute; top:0; left:0; min-height:150px; } <div id="parent"> <div id="child"></div> </div> 

Answer 1

What you are trying to achieve is simply not possible, simply for the simple fact that when you add an absolute rule to an element, you implicitly take it out of your usual layout context. If you are in the relative parent container, this means that it has a specific field that will contain it and sets the default x and y coordinates for this element, the default is a window, and therefore, when the relative position is not assigned to the parent absolute location, the elements will refer to the upper left corner of the browser window.

Now, an alternative could be to use the overflow hidden in the parent element and the presence of a scroll bar for the remaining content. See my example in jsfiddle :

 #parent{ position:relative; min-height:200px; width:200px; border: 1px solid #ccc; overflow-y: scroll; } #child{ position:absolute; top:0; left:0; min-height:150px; } 

 <div id="parent"> <div id="child"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci sit amet eros hendrerit tristique. Mauris non felis purus, sit amet molestie dolor. Quisque iaculis ante ac massa suscipit fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel lectus urna, vel condimentum felis. In vel justo lorem, vel vulputate tortor. Morbi hendrerit erat at ipsum tempus ut sollicitudin nisi consectetur. Suspendisse potenti. Donec varius orci at mi consequat porttitor. Integer vestibulum convallis ultricies. Mauris imperdiet mauris nec nunc fringilla varius. Nunc molestie tempus mi, quis congue libero iaculis eget. Vestibulum a odio nisl. Mauris mollis consequat est, id porttitor metus semper sed. Sed magna lacus, pulvinar vel laoreet vel, dignissim at sem. Aliquam erat volutpat. Donec sit amet nibh sit amet arcu hendrerit facilisis. Nunc euismod, sapien eget fermentum sagittis, tortor felis varius velit, non tincidunt sapien diam in augue.</p> </div> </div> 

Answer 2

I do not think that you can do what you ask. You can set body, html: { height: 100%; } body, html: { height: 100%; } , and then change the parent div to height: 100%; and it will effectively do what you want. But without knowing the other HTML markup, it's hard to give a reasonable answer here.