CSS - Position: Absolute; - Auto Height

CSS - position: absolute; - auto height

As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:

• Reorganize so that the child elements remain in the document flow
• Use JavaScript on load of the page to set the height of the parent to the height of the largest child

This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.

Auto Height of absolute Positioning in css

if you knew in advance the ratio between width and height of your image you could cheat using a proportional padding-bottom

E.g If your image were 300x180 you may use this css

#imagetree {
   position:absolute; 
   z-index:1; 
   bottom:0;
   overflow: hidden;
   background: url(http://dummyimage.com/300x180/000000/fff.jpg);
   background-repeat: no-repeat;

   width: 100%;            /* use 100% of width */
   padding-bottom: 60%;    /* 180px is 60% of 300px */
   background-size: cover; /* cover the div entirely with the background */
}

Example: http://codepen.io/anon/pen/ruBFt

How to get auto-height from position: absolute element?

You can't size the .parent with the absolutely positioned .child as absolute positioning removes the element from the box model.

If you're tied to this markup structure you can use javascript to set the height of the .dropdown to be the same as the height of the .child

(I used jquery)

something like :

$(".parent").hover(function() {
    x = $(this).find(".child").height();
$(this).parent('.dropdown').css({
    'height': x + 'px'
   });
 }, function() {
  $(this).parent('.dropdown').css({
    'height': 'auto'
  });
});

I here's (a very janky) pen to demonstrate what I mean.
http://codepen.io/NeilWkz/pen/YWwpgJ

Content after div with absolute position and auto height

Yes It is possible easily by position: relative; and float: left;

Absolute Div auto Height not working

You can try this:

.content div{
  position: relative;

}/**instead of position: absolute;

you can selected div visibility: visible:
and none-selected div visibility hidden;

absolute positioning and dynamic height

In order to have percentage height to work you need to set both the parent elements .container .article .content-meta and .container .article to height:100%.

.container {

  overflow: hidden;

  position: relative;

  width: 100%;

  height: 350px;

}

.container .article {

  width: 100%;

  position: absolute;

  left: 0;

  top: 0;

  background-color: red;

  height: 100%;

}

.container .article .main-content {

  width: 50%;

  float: right;

}

.container .article .content-meta {

  width: 50%;

  float: right;

  position: relative;

  height: 100%;

}

.container .content-title,

.container .content-info {

  width: 100%;

  position: absolute;

  left: 0;

  height: 50%;

}

.container .content-title {

  background-color: green;

  top: 0;

}

.container .content-info {

  background-color: blue;

  top: 50%;

}

<div class="container">

  <div class="article">

    <div class="main-content">

      Main content goes here...

    </div>

    <div class="content-meta">

      <div class="content-title">

        the title of content goes here...

      </div>

      <div class="content-info">

        some information about content....

      </div>

    </div>

  </div>

</div>

CSS position:absolute + dynamic height

You may want to try wrapping the 4 divs in a parent div and absolutely positioning that. Then you can allow the position of one of the children divs to affect another.

http://jsfiddle.net/25Xrh/5/

The solution you had meant that no matter what you tried to affect the top:60px and left:180px stopped it from moving anywhere other than this, so the dynamic content div wasn't able to reposition it.

How does width/height get calculated on position:absolute container with text in it and width:auto;height:auto?

If we turn off top and transform, this is how it looks:

Then, the block is moved to the center (using those top and transform), but its width is determined by the "squeeze" caused by left (remember that it's a div, so by default it wants to be 100% of the parent's width).

It means that the amount of "squeezing" is dependent on the screen width.

The thing is font-size is also dependent on the screen width: 3vw.

Since both the box's width and the font size is calculated by the width of the container (which is in this case, the same size as the viewport itself), you get that constant size.

If you had a constant font size, let's say of 2rem, this is how it will look:

---

Related Topics