Min - Height with Child Set to Position:Absolute

min - height with child set to position:absolute

What you are trying to achieve is plain impossible,just for the simple fact that when you add an absolute rule to an element, you are implicitly taking it out of its normal layout context. Being in a relative parent container only means that it has a defined box that will contain it and set the default x and y coordinates of that element, by default it's the window and that's why when the position relative is not assigned to the parent absolute positioned elements will be relative to the top-left of the browser window.

Now an alternative could be to use an overflow hidden in the parent and have a scroll bar for the remaining content. See my example on 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>

Make position absolute child fit width and height of parent that overflows due to a different child with min-height and min-width

Simply make the parent inline-block. By default it's a block element so it width is limited to its parent width and you are having an overflow. Using inline-block will make it fit its content.

.parent {  background-color:red;  position:relative;  /*overflow:auto; useless as the overflow is now on an upper level*/  display:inline-block;}.sibling1{  min-height: 4000px;  min-width: 4000px; }.sibling2{  background-color:orange;
  position: absolute;
  top:0;   right:0;  bottom:0;  left:0;  /*useless  width:100%;  height: 100%;*/}

<div class="parent">  <div class="sibling1">  </div>  <div class="sibling2">  </div></div>

Make absolute positioned div expand parent div height

You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JS.

Update 2022: Nowadays one might use CSS flexbox[1] or grid[2] to reverse the visual order of HTML elements inside a parent container without using position: absolute;.

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#alignment_and_flex-direction
2. https://developer.mozilla.org/en-US/docs/Web/CSS/grid or
   Reverse order of columns in CSS Grid Layout

Child inside parent with min-height: 100% not inheriting height

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can't test in IE at the moment)

Possible workaround:

• add position:relative to #containment
• add position:absolute to #containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I'm currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.

If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto height. And that's exactly what Webkit - and all other browsers - do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I'd give it a min-height of 100%. And - more importantly - if I set the child element to display:table-cell it will perfectly inherit the height of the container element - whether it's 100% or more.

Full CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

---

Related Topics