Member Avatar for Kruptein

I have this id that should be default 15px from the bottom (which works).
But if I have content larger, the content box should grow in height, how can I specify this?

#content {
    position:absolute;
    top: 85px;
    left:15px;
    right:130px;
    bottom:15px;
    background-color:#00CC00;
    font-family: Arial, Helvetica, Tahoma, sans-serif;
}
Edited by Kruptein because: n/a
  • 3 Contributors
  • 3 Replies
  • 85 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Kruptein

Dani AI

Generated

Absolute positioning with both top and bottom set fixes the element height to the space between those offsets, so the box will not "grow" when its content overflows. That is why your original rule behaved as if the height were locked. See the CSS position rules for details: position.

Practical ways to let the panel expand while keeping a 15px gap at the bottom:

  • Stop anchoring the element on both top and bottom. Let it participate in normal flow (no absolute) or remove the bottom constraint so height:auto can grow.
  • Use a min-height to ensure a starting size while allowing growth, or keep the absolute positioning but make the inner content scroll with overflow:auto if you must keep it anchored. See the min-height docs for the sizing behavior: min-height.

Notes tied to the thread: 's approach (making the height flexible and using padding/margins) is the right pattern for growth. 's top:auto still left the box constrained by the bottom anchor, so it didn't achieve the expansion you wanted. Also confirm which element is the positioned containing block (absolute elements are sized relative to the nearest positioned ancestor).

Recommended Answers

All 3 Replies

Member Avatar for emhmk1

I have this id that should be default 15px from the bottom (which works).
But if I have content larger, the content box should grow in height, how can I specify this?

#content {
    position:absolute;
    top: 85px;
    left:15px;
    right:130px;
    bottom:15px;
    background-color:#00CC00;
    font-family: Arial, Helvetica, Tahoma, sans-serif;
}

Hi,
You could try height:auto; then use margin/padding to get the desired bottom px.

Also if you require a minimum set height then you could use min-height:100px; or whatever you desire.
Hope it helps....

Member Avatar for almostbob 
#content { position:absolute;  top:auto; left:15px; right:130px;  bottom:15px; background-color:#00CC00; font-family: Arial, Helvetica, Tahoma, sans-serif; }
Member Avatar for Kruptein

emhkm1 solved the problem,
almostbob your way didn't do what I wanted...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.