Not so famous, yet powerful feature of absolute positioning is stretching a box. Absolute positioning lets us having a box positioned according to the bounds of the closest relative/absolute/body parent (also known as offset parent).

The most popular use is having a box positioned in either top or bottom and right or left coordinates, and the dimensions of this box are defined by its inner content or a specific width/height.

Example #1 - Absolute Inside Relative, With Fixed Dimensions

“`html
1
2
3
4
5
6
7
8
9
10
11
12
13

```css

.relative {
    position:relative;
    width:100px; height:80px;
    background-color:#6E919A;
}
.absolute {
    position:absolute; top:10px; left:10px;
    width:30px; height:50px;
    background-color:#9BC9D1;
}

But what if you don’t know the dimensions of the parent, or don’t want to maintain the pixels twice on both parent and absolute child?

A height:100% value can be applied only for specific situations: The inner box should be the exact same height as its parent, start at the top and end at the bottom, no offsets. If a margin is applied, the inner box will just be moved but the height will stay the same, hence it will overflow. If a padding is applied, the height of the box will get bigger, and the box will also overflow.

The Solution

The less famous use is to omit width or height of the absolute positioned element and use a combination of top and bottom or left and right, which will cause our box to stretch between the bounds of the offset parent.

Example #2 - Absolute Inside Relative Without a Specific Height: The Absolute Stretches to the Relative’s Bounds

“`html
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
1
2
3
4
5
6
7
8
9
10
11
12
13

```css

.relative {
    position:relative;
    width:100px;
    background-color:#6E919A;
}
.absolute {
    position:absolute; top:10px; bottom:20px; left:10px;
    width:30px;
    background-color:#9BC9D1;
}

What is it Good For?

So many things!

  • If you need 100% width or height for a div but you have padding/border that aren’t counted in the 100%, and therefore the 100% exceeds the parent - use top:0 and bottom:0 with a padding. Example (can be also solved with box-sizing, which isn’t supported by IE8).
  • If you need a designed scroll bar, and it should be as high as its parent’s height, but should also start from a certain offset: top:5px; right:5px; bottom:5px; width:20px; will fix its position. Example.
  • Sticky header and footer, by stretching the content area from header’s end to footer’s start. Example:
“`html
header
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
1

css .header { position:absolute; top:0; left:0; right:0; height:20px; background-color:#6E919A; } .content { position:absolute; top:20px; bottom:20px; right:0; left:0; background-color:#9BC9D1; overflow:auto; } .footer { position:absolute; bottom:0; left:0; right:0; height:20px; background-color:#6E919A; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

</div>



<ul>
  <li>If you still can't use border image and other CSS3 goodies, and you have a designed box with image edges - you can use this method to stretch the top/bottom/left/right frame parts, but up to the corners. Example:</li>
</ul>



<div style="display: none;">```html

<div class="relative">
    xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx

    <div class="corner left-top"></div>
    <div class="corner right-top"></div>
    <div class="corner left-bottom"></div>
    <div class="corner right-bottom"></div>
    <div class="frame top"></div>
    <div class="frame right"></div>
    <div class="frame bottom"></div>
    <div class="frame left"></div>
</div>?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.relative {
    position:relative;
    width:100px;
    background-color:#6E919A;
    padding:20px;
}
.corner {
    position:absolute;
    width:15px; height:15px; overflow:hidden;
    background-color:#9BC9D1;
}
.corner.left-top { left:0; top:0; }
.corner.right-top { right:0; top:0; }
.corner.left-bottom { left:0; bottom:0; }
.corner.right-bottom { right:0; bottom:0; }

.frame {
    position:absolute; overflow:hidden;
    background-color:#455A5F;
}
.frame.top { height:15px; top:0; right:15px; left:15px; }
.frame.right { width:15px; right:0; top:15px; bottom:15px; }
.frame.bottom { height:15px; bottom:0; left:15px; right:15px; }
.frame.left { width:15px; left:0; top:15px; bottom:15px; }

Share your examples in the comments.

Comments