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

问题

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;
}

回答1:

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

回答2:

maybe it's just typo :

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

回答3:

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

回答4:

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?

来源：https://stackoverflow.com/questions/19085370/100-height-for-background-not-working-despite-html-and-body-height-100

标签

html

css

height