CODEWITHSUNDEEP
css
superUntitled
superUntitled

Reputation: 22567

CSS - position: absolute; - auto height

I am having a problem with some div's

The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?

The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.

Upvotes: 33

Views: 57799

Answers (9)

rainat
rainat

Reputation: 39

Try to use display: inline-table, height: auto; .. it works for me

Upvotes: 2

Майкл Миллер
Майкл Миллер

Reputation: 33

Maybe u can try max-height: calc(100% - 50%); it will work if the content that should be in the middle of the screen/div is super short/small.

position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...

Upvotes: 0

Kas Elvirov
Kas Elvirov

Reputation: 8000

i've done this task without any JS. Only, by CSS:

.frame {
   max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}

Upvotes: 0

Samuel Willems
Samuel Willems

Reputation: 301

Here is a long overdue cross-browser solution to your problem. No more static width, no more em hack.

<style>
  /* clearfix */
  .container:after {
    content: '';
    display: table;
    clear: left;
  }

  .page {
    float: left; /* display side-by-side */
    width: 100%; /* be as wide as parent */
    margin-right: -100%; /* take up no width */
  }
</style>

<div class="container">
  <div class="page"></div>
  <div class="page"></div>
</div>

After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .page elements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.

Here's a demo: https://jsfiddle.net/eqe2muhv/

This also works for inline-blocks, of course. Though you might need to set the font-size or letter-spacing of the container to 0. I would also recommend using vertical-align: top on the .page, to simulate a regular block element.

Here's a demo: https://jsfiddle.net/dzouxurs/8/

Upvotes: 1

Simon
Simon

Reputation: 3727

I recently had this problem with a fade in/out CSS transition slideshow, and ended up solving it by giving the first child element position: relative; and the others position: absolute; top:0; left: 0; which ensures that the containers height is the same as the height of first element. Since my CSS transition slideshow uses the opacity property the container dimensions never changes during the course of the slideshow.

Alas, since I also needed to supply a javascript fallback for older browsers I had to set the container height for these browsers anyway (because of jQuerys fadeIn/fadeOut actually setting display: none; I would guess).

Upvotes: 20

Sawny
Sawny

Reputation: 1423

Test display: inline-block on the element that need auto height.

Upvotes: -3

kmiyashiro
kmiyashiro

Reputation: 2249

You can simply float the divs if you want them to be on the same horizontal plane.

Upvotes: 0

Andrew
Andrew

Reputation: 1187

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.

Upvotes: 26

dscher
dscher

Reputation: 1545

I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.

Upvotes: 0

Related Questions