0

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.

big_smile
  • 1,487
  • 4
  • 26
  • 59
  • What if a content-elements has `position:fixed`? Should they be warpped too? – Grim Jul 25 '13 at 11:46
  • do you mean this: http://stackoverflow.com/questions/10155344/auto-height-div-with-overflow-and-scroll-when-needed ? – Joum Jul 25 '13 at 11:47
  • @PeterRader. No the position:fixed shouldn't be wrapped. Joum: No, I just want my wrapper to expand in height to fill its children. – big_smile Jul 25 '13 at 12:03
  • And what if a content-div has fixed size and `overflow:visible` or `hidden` and its contents is oversized? – Grim Jul 25 '13 at 12:05
  • @PeterRader I just want the wrapper DIV's height to be as big as its contents. If the content-divs have overflow:hidden, then the excess content will be hidden, so it won't affect the height of the wrapper DIV. If the content-div has overflow:visible, then the wrapper DIV should expand in height to fit that content. – big_smile Jul 25 '13 at 13:32
  • In respecting of `overflow:visible` it will may take **massive calculation** depending on complexity of the DOM. Are you sure[y/N]? – Grim Jul 25 '13 at 13:40
  • @PeterRader I just want the wrapper DIV to expand to its contents. I thought that is the normal behaviour of a DIV and was not expecting it to be so complex! – big_smile Jul 25 '13 at 15:09
  • @big_smile in case of element-oversizes that are wrapped in elements using `overflow:visible` its complex. – Grim Jul 25 '13 at 21:15

4 Answers4

2

Just make wrapper div style 

overflow: auto
mavili
  • 3,385
  • 4
  • 30
  • 46
  • Flow: auto doesn't do anything. Do you mean overflow:auto - That adds scroll bars. (Overflow:visible doesn't do anything, and overflow:hidden hides the content). – big_smile Jul 25 '13 at 11:59
  • yes, i meant overflow. changed it. it should really expand to the contents of its children – mavili Jul 25 '13 at 12:27
  • This works, you only need to change both these values: `#wrapper { overflow: auto or hidden; height: auto;}` . More info here: http://stackoverflow.com/questions/11498946/div-shrinks-when-float-is-applied-to-its-sub-elements – Stano Jul 25 '13 at 13:52
  • @staono: I have used before/after to add a background behind the wrapper. If I use overflow, the before/after elements are hidden. How can I keep them visible. – big_smile Jul 26 '13 at 08:06
1
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;
}
jjenzz
  • 1,519
  • 1
  • 14
  • 19
  • I tried this but it just hides the content that is outside of the wrapper. – big_smile Jul 25 '13 at 12:01
  • you need to take 'height: 100%' OFF of the body. Make sure it is 'min-height' not 'height'. forcing a height means the body will never be the same height as the content within it which is why your overflow is hiding the content. – jjenzz Jul 26 '13 at 10:48
0

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

If so, try sticky footer.

Pankucins
  • 1,690
  • 1
  • 16
  • 25
0

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/

Alfred
  • 21,058
  • 61
  • 167
  • 249