CSS: Stretch a Box to its Parent’s Bounds

Posted in CSS

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

<div class="relative">
    <div class="absolute"></div>
</div>

.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

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

    <div class="absolute"></div>
</div>

.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:
<div class="header">header</div>

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

<div class="footer">footer</div>

.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;
}

  • 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:

<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>​
.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.

  • Twitter
  • Facebook
  • del.icio.us
  • Digg
  • Google Buzz
Elad Ossadon
August 29th, 2010
No Comments »

Links^2 – Aug 22nd, 2010

Posted in Links
  • Twitter
  • Facebook
  • del.icio.us
  • Digg
  • Google Buzz
Elad Ossadon
August 22nd, 2010
No Comments »

Clear All ASP.NET Cache/Static Objects Programmatically

Posted in ASP.NET

I used to re-save Web.config or Recycle a website in IIS when I wanted to delete all ASP.NET website’s cache / reset all static objects, or basically restart the application.

This piece of code does it, programmatically:

HttpRuntime.Close();

So I created a little .ashx/MVC action to do so and access it through the browser.

Have in mind that this will reset the application, including Sessions and static variables, so never use it on production.

  • Twitter
  • Facebook
  • del.icio.us
  • Digg
  • Google Buzz
Elad Ossadon
August 17th, 2010
No Comments »

IIS7 File Upload Limit

Posted in ASP.NET, IIS

I encountered this while uploading a large file to an ASP.NET handler, seems like there’s a default limit of ~30MB for a single request in IIS7 on Windows 7.

After some researching, I found that there’s a setting inside <system.webServer> other than the regular limit in <httpRuntime maxRequestLength=".."/> (god and MS know why the duplication).

To fix that do one of the following:

Option 1: Add to your Web.config the following code, under the appropriate nodes:

<system.webServer>
	<security>
		<requestFiltering>
			<requestLimits maxAllowedContentLength="2147483648" />
		</requestFiltering>
	</security>
</system.webServer>

Option 2: Go to IIS 7 control panel, under your website look for Request Filtering and then Edit features (on the right), then set Maximum allowed content length to your desired limit. This will add to your Web.config the lines from option 1.

Actually I had this while playing with FancyUpload (great thing!) and got Error #2038 on every request.

  • Twitter
  • Facebook
  • del.icio.us
  • Digg
  • Google Buzz
Elad Ossadon
August 13th, 2010
No Comments »

Links^2 – Aug 13th, 2010

Posted in Links
  • Twitter
  • Facebook
  • del.icio.us
  • Digg
  • Google Buzz
Elad Ossadon
August 13th, 2010
No Comments »
« Older Entries