Make absolute positioned div expand parent div height

Question

As you can see in the CSS below  I want child2 to position itself before child1  This is because the site I m currently developing should also work on mobile devices  on which the child2 should be at the bottom  as it contains the navigation which I want below the content on the mobile devices  - Why not 2 masterpages  This is the only 2 divs which are repositioned in the entire HTML  so 2 masterpages for this minor change is an overkill   HTML    lt div id  parent  gt       lt div class  child1  gt  lt  div gt       lt div class  child2  gt  lt  div gt   lt  div gt    CSS   parent   position  relative  width  100     child1   width  auto  margin-left  160px    child2   width  145px  position  absolute  top  0px  bottom  0px      child2 has dynamic height  as different subsites could have more or less navigation items   I know that absolute positioned elements are removed from the flow  thus ignored by other elements  I tried setting overflow hidden  on the parent div  but that didn t help  neither does the clearfix   My last resort will be JavaScript to reposition the two divs accordingly  but for now I ll try and see if there exist a non-JavaScript way of doing this

User · Answer

There s a very simple hack that fixes this issue  Here s a codesandbox that illustrates the solution  https   codesandbox io s 00w06z1n5l  HTML   lt div id  parent  gt     lt div class  hack  gt      lt div class  child  gt      lt  div gt     lt  div gt   lt  div gt    CSS   parent   position  relative  width  100      hack   position  absolute  left 0  right 0  top 0    child   position  absolute  left  0  right  0  bottom 0      you can play with the positioning of the hack div to affect where the child positions itself   Here s a snippet   x000D   x000D  html   x000D    font-family  sans-serif  x000D    text-align  center  x000D    x000D   x000D   container   x000D    border  2px solid gray  x000D    height  400px  x000D    display  flex  x000D    flex-direction  column  x000D    x000D   x000D   stuff-the-middle   x000D    background  papayawhip x000D      url  https   camo githubusercontent com 6609e7239d46222bbcbd846155351a8ce06eb11f 687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67    x000D    flex  1  x000D    x000D   x000D   parent   x000D    background  palevioletred  x000D    position  relative  x000D    x000D   x000D   hack   x000D    position  absolute  x000D    left  0  x000D    top 0  x000D    right  0  x000D    x000D   child   x000D    height  40px  x000D    background  rgba 0  0  0  0 5   x000D    position  absolute  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    x000D       lt div class  container  gt  x000D         lt div class  stuff-the-middle  gt  x000D          I have stuff annoyingly in th emiddle x000D         lt  div gt  x000D         lt div class  parent  gt  x000D           lt div class  hack  gt  x000D             lt div class  child  gt  x000D              I m inside of my parent but absolutely on top x000D             lt  div gt  x000D           lt  div gt  x000D          I m the parent x000D           lt br   gt  You can modify my height x000D           lt br   gt  and my child is always on top x000D           lt br   gt  absolutely on top x000D           lt br   gt  try removing this text x000D         lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

Try this  it was worked for me   child       width  100       position  absolute      top  0px      bottom  0px      z-index  1      It will set child height to parent height

User · Answer

There is a quite simple way to solve this   You just have to duplicate the content of child1 and child2 in relative divs with display none in parent div  Say child1 1 and child2 2  Put child2 2 on top and child1 1 at the bottom   When your jquery  or whatever  calls the absolute div  just set the according relative div  child1 1 or child2 2  with display block AND visibility hidden  The relative child will still be invisible but will make parent s div higher

User · Answer

I had a similar problem  To solve this  instead of calculate the iframe s height using the body  document or window  I created a div that wraps the whole page content  a div with an id  page  for example  and then I used  its height

User · Answer

Although stretching to elements with position  absolute is not possible  there are often solutions where you can avoid the absolute positioning while obtaining the same effect  Look at this fiddle that solves the problem in your particular case http   jsfiddle net gS9q7    The trick is to reverse element order by floating both elements  the first to the right  the second to the left  so the second appears first    child1       width  calc 100  - 160px       float  right     child2       width  145px      float  left      Finally  add a clearfix to the parent and you re done  see the fiddle for the complete solution    Generally  as long as the element with absolute position is positioned at the top of the parent element  chances are good that you find a workaround by floating the element

User · Answer

Absolute views position themselves against the nearest ancestor that isn t statically positioned  position  static   therefore if you want an absolute view positioned against a given parent  set the parent position to relative and the child to position to absolute

User · Answer

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

User · Answer

Feeela is right but you can get a parent div contracting or expanding to a child element if you reverse your div positioning like this   parent       position  absolute         position it in the browser using the  left    top  and  margin          attributes        child       position  relative      height  100       width  100        overflow  hidden         to pad or move it around using  left  and  top  inside the parent       This should work for you

User · Answer

There is a better way to do this now   You can use the bottom property        my-element         position  absolute        bottom  30px

User · Answer

This is very similar to what  ChrisC suggested  It is not using an absolute positioned element  but a relative one  Maybe could work for you    lt div class  container  gt     lt div class  my-child  gt  lt  div gt   lt  div gt    And your css like this    container      background-color  red      position  relative      border  1px solid black      width  100       my-child      position  relative      top  0      left  100       height  100px      width  100px      margin-left  -100px      background-color  blue      https   jsfiddle net royriojas dndjwa6t

User · Answer

With pure JavaScript  you just need to retrieve the height of your static position child element  child1 using the getComputedStyle   method then set that retrieve value as the padding-top for that same child using the HTMLElement style property     Check and run the following Code Snippet for a practical example of what I described above    x000D   x000D     JavaScript    x000D   x000D  var child1   document querySelector   child1    x000D  var parent   document getElementById  parent    x000D   x000D  var childHeight   parseInt window getComputedStyle child1  height     px   x000D  child1 style paddingTop   childHeight  x000D     CSS    x000D   x000D   parent   position  relative  width  100     x000D   child1   width  auto    x000D   child2   width  145px  position  absolute  top  0px  bottom  0px    x000D  html  body   width  100  height  100   margin  0  padding  0    x000D   lt  -- HTML -- gt  x000D   x000D   lt div id  parent  gt  x000D       lt div class  child1  gt STATIC lt  div gt  x000D       lt div class  child2  gt ABSOLUTE lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You either use fixed heights or you need to involve JS     Here is the JS example   ---------- jQuery JS example--------------------      function findEnvelopSizeOfAbsolutelyPositionedChildren containerSelector           var maxX     containerSelector  width    maxY     containerSelector  height               containerSelector  children   each function  i               if  maxX  lt  parseInt   this  css  left        this  width                     maxX   parseInt   this  css  left        this  width                              if  maxY  lt  parseInt   this  css  top        this  height                     maxY   parseInt   this  css  top        this  height                                      return                width   maxX               height   maxY                      var specBodySize   findEnvelopSizeOfAbsolutelyPositionedSubDivs   SpecBody            SpecBody   width specBodySize width           SpecBody   height specBodySize height

User · Answer

This question was asked in 2012 before flexbox  The correct way to solve this problem using modern CSS is with a media query and a flex column reversal for mobile devices  No absolute positioning is needed  https   jsfiddle net tnhsaesop vjftq198 3  HTML   lt div class  quot parent quot  gt     lt div style  quot background-color lightgrey  quot  gt       lt p gt        I stay on top on desktop and I m on bottom on mobile      lt  p gt     lt  div gt     lt div style  quot background-color grey  quot  gt       lt p gt        I stay on bottom on desktop and I m on top on mobile      lt  p gt     lt  div gt   lt  div gt   CSS   parent     display  flex    flex-direction  column      media  max-width  768px       parent       flex-direction  column-reverse

User · Answer

Also consider next approach   CSS     parent     height  100      parent after     content        display  block      Also since you are trying to reposition divs consider css grid

User · Answer

I came up with another solution  which I don t love but gets the job done   Basically duplicate the child elements in such a way that the duplicates are not visible    lt div id  parent  gt       lt div class  width-calc  gt           lt div class  child1  gt  lt  div gt           lt div class  child2  gt  lt  div gt       lt  div gt        lt div class  child1  gt  lt  div gt       lt div class  child2  gt  lt  div gt   lt  div gt    CSS    width-calc       height  0      overflow  hidden      If those child elements contain little markup  then the impact will be small

[html] Make absolute positioned div expand parent div height

Examples related to html

Examples related to css

Examples related to position

Examples related to master-pages

Examples related to parent-child