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.
9 Answers 9
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.
To anyone choosing to use JavaScript, please keep in mind that you should probably recalculate the height of the parent when the window is resized. Personally I would encourage a pure CSS solution, to avoid having to worry about such cases. Though clearly that causes different problems, like spending over seven years attempting to find an answer to a question with only 18 upvotes. +1
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).
This truly saved my day. I was trying to figure out a how-to achieve one layout for 2 days and finally stumbled upon this answer. God bless you!
Here is a long overdue cross-browser solution to your problem. No more static width , no more em hack.
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.
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.
min-height
The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height .
Try it
The element’s height is set to the value of min-height whenever min-height is larger than max-height or height .
Syntax
/* value */ min-height: 3.5em; /* value */ min-height: 10%; /* Keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* Global values */ min-height: inherit; min-height: initial; min-height: revert; min-height: revert-layer; min-height: unset;
Values
Defines the min-height as an absolute value.
Defines the min-height as a percentage of the containing block’s height.
The browser will calculate and select a min-height for the specified element.
The intrinsic preferred min-height .
The intrinsic minimum min-height .
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)) .
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | 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 percentage value is treated as 0 . |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |
Formal syntax
min-height =
auto |
|
min-content |
max-content |
fit-content( )
=
|
Examples
Setting min-height
table min-height: 75%; > form min-height: 0; > Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 18, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.