ansaurus

Question

min-height 100% doesnt work on inner div

Answer 1

+1 A:

You could try setting an explicit height as well as a min-height:

min-height:100%;
height:100%;

Don't know for sure if it'll work, but something inside says it might.

Kyle Sevenoaks 2010-10-22 07:22:06

Problem with that though is if the content of the page DOES get larger than one window, then the div wont scale. =[

Razor Storm 2010-10-22 07:22:45

Use height instead of min-height on body. If the div gets bigger, it should overflow and get displayed correctly (works in firefox, chrome, ie for me).

bazmegakapa 2010-10-22 07:26:01

Awesome it solved it. I'm not sure which one to mark as the right answer since both of you guys contributed one part to the final solution: (use html AND body, and also use height along with min-height). Voted up

Razor Storm 2010-10-22 07:35:55

Glad to help :)

Kyle Sevenoaks 2010-10-22 07:38:22

Answer 2

+1 A:

I've already solved a similar problem with

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
}

It seems <html> is sometimes taken into account to calculate height.

MatTheCat 2010-10-22 07:26:04

Tried it, no effect on ff 3.6.10. =[

Razor Storm 2010-10-22 07:30:06

Actually nvm it worked, it was the height:auto!important; that was killing it. i wonder why it didn't affect chrome though.

Razor Storm 2010-10-22 07:35:11

The only thing I know is height calculation is VERY hazardous depending on the browser... =/

MatTheCat 2010-10-22 07:40:14

Answer 3

A:

body, html {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
}
div#content
{
   min-height:100%;
   height: 100%;
}

This works for sure...

Badr Hari 2010-10-22 07:36:41

ansaurus

tags:

views:

answers:

min-height 100% doesnt work on inner div

related questions