CODEWITHSUNDEEP
htmlcss
big_smile
big_smile

Reputation: 1523

HTML/CSS: Make a wrapper extend to fit the height of its children

I am making a website. All the content is stored in a wrapper DIV. The content DIV has a border style assigned to it.

I want the height of the wrapper DIV to be tall enough to fit it's content, so the border goes to the end of the page.

I thought this would happen by default, as height:auto is the default value of all elements.

Here is my page.

Thanks for any help that can be offered.

Upvotes: 0

Views: 9187

Answers (4)

mavili
mavili

Reputation: 3424

Just make wrapper div style 

overflow: auto

Upvotes: 2

Alfred
Alfred

Reputation: 21386

Just use a div to nest contents and "do not" give it any height. By default, it will fit it's children. If necessary, you may give a display: block.

Here is the fiddle http://jsfiddle.net/8bP9b/

Upvotes: 0

jjenzz
jjenzz

Reputation: 1559

html {
  height: 100%;
}

body {
  /* not height: 100%; otherwise you're 
   * fixing it to the height of the viewport 
   */
  min-height: 100%; 
}

.wrapper {
  /* some kind of clearfix is 
   * necessary because your content 
   * is floated
   */
  overflow: hidden;
}

Upvotes: 1

Pankucins
Pankucins

Reputation: 1720

If I understood you correctly you want to create a full height web site?

If so, try sticky footer.

Upvotes: 0

Related Questions