100% height for background not working (despite html and body height 100%)

Question

I want to set my wrapper to be 100% height. But I am unable to do so despite setting the height to 100%.

Currently, My main_wrapper is empty. It should give me a background color of red.

My aim is to have a footer at the bottom using fixed but that is off topic. But it will be good if someone could give a link for position fixed.

<html>
<head runat="server">

</head>
<body class="body">
    <form id="form1" runat="server">
        <div id="main_wrapper">


        </div>

        <div class="clear"></div>

    </form>

</body>
</html>



* {
    margin: 0; padding: 0;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

.clear {
    clear: both;
}

html {
    margin: 0;
    width: 100%;
    height: 100%;
   /* min-width: 640px; min-height: 480px;*/
}

body {
    margin: 0; /*Top and Bottom 0, Left and Right auto */
    width: 100%;
    height: 100%;
}

    .body #main_wrapper {
        margin: 0;
        width: 100%;
        height: 100%;
        backgroud: #f00;
}

score 1 · Answer 1 · answered Sep 30 '13 at 01:59

1

maybe it's just typo :

 .body #main_wrapper {
    margin: 0;
    width: 100%;
    height: 100%;
    backgroud: #f00; } <<-- typo

answered Sep 30 '13 at 01:59

elune

338
1
9

i tried your code, and change backround: red on main_wrapper and it's work for me. here's my code : #main_wrapper { margin: 0; width: 100%; height: 100%; background: red; } i replaced .body #main_wrapper with just #main_wrapper – elune Sep 30 '13 at 02:20
@elune: he is using `wrapper` inside `form` so it should be `#form #main_wrapper` – vishalkin Sep 30 '13 at 02:28
@vishalkin : CMIIIW, but id is unique, i mean it's no different when you call him #main_wrapper,#form #main_wrapper, or .body #main_wrapper – elune Sep 30 '13 at 02:40
Hi, elune do I have to include #body #form #main_wrapper? Normally I always ignored form and it still work – Benson Sep 30 '13 at 02:51
no. as i said, id is unique, u can ignored body and form and just type #main_wrapper. – elune Sep 30 '13 at 03:01

score 1 · Accepted Answer · answered Sep 30 '13 at 02:24

1

    #form1 #main_wrapper {
            margin: 0;
            width: 100%;
            height: 100%;
            background:#f00;
            min-width: 640px; 
       min-height: 480px;
}

answered Sep 30 '13 at 02:24

vishalkin

1,175
2
12
24

3

It is more useful if you provide a little background/explanation with the code. – Andrew Sep 30 '13 at 02:42

score 1 · Answer 3 · answered Sep 30 '13 at 02:35

There is nothing wrong with your code.

You are setting your divs height and width correctly but you forget that your div is inside a form, which you are not specifying the height/width.

Just add

#form1{ width: 100%; height: 100%; }

To your css and it will work fine.

EXAMPLE

score 0 · Answer 4 · answered Sep 30 '13 at 02:29

er, yeah... check out http://jsfiddle.net/5PZcq/2/

#main_wrapper {
    position:absolute;
    margin: 0;
    width: 100%;
    height: 90%;
    background: #f00;
}
#footer {
    position:absolute;
    top:90%;
    height: 10%;
    width: 100%;
    background: blue;
}

I think this captures whats going here. In order to control a div's size with percentages, you have to declare it position:absolute. The clear thing is cool but only works with floating divs. In my example I have the main div (90% tall) and a footer div (10% tall) with opacity less than one I can see entries stuck in the clear, but when the opacity line is removed, the 'clear' div disappears behind the main red div.

So the question is, why do you even need the clear thing at all? Obviously I can't tell the complete scope of your project. Does this example make more sense?

100% height for background not working (despite html and body height 100%)

4 Answers4

Linked