CODEWITHSUNDEEP
htmlcss
jmasterx
jmasterx

Reputation: 54183

Min height of 90%?

I have a content div. I want it to be atleast 90% of the screen.

I currently have:

   min-height: 400px;
    height: auto !important;
    height: 400px;

in my #content div's css.

Changing to 90% did not work.

Is there some way to do this?

Essentially it will always run 90% down the screen unless something makes it bigger than 90%.

Thanks

Upvotes: 1

Views: 873

Answers (4)

Milind Morey
Milind Morey

Reputation: 2114

you need to set min-height of Div ie min-height:90%; 

#mainDiv {
min-height: 90%;
background-color: #ddd;
}

Upvotes: 0

John Chan
John Chan

Reputation: 305

Depends how you're going to have the content, you can fake this by letting the overflowed content have the same background. For example:

#mainDiv {
min-height: 10px;
height: 90%;
background-color: #ddd;
}

#mainDiv p {
background-color: #ddd;
}

This way, your overflowed content would "look like it's expanding" with the div. Not ideal, but this gets what you're trying to achieve.

Upvotes: 0

António Almeida
António Almeida

Reputation: 10127

You need to set html and body to fill 100% of the height, look at this fiddle: http://jsfiddle.net/promatik/KhCb6/

html, body {
    height: 100%;
}

#myDiv {
    min-height: 10px;
    height: 90%;
    background-color: #CCC;
    margin: 1px;
}

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

Your height:auto !important is killing it. Remove it. Also, I would suggest using this method:

height:90%;
min-height:400px;

Upvotes: 3

Related Questions