网站中的高度问题

Question

I am creating a site for which I have created a structure but I am facing height issue in that. here is what I am expecting

but this is what I am getting

Below is the CSS:

html {height:100%!important;}
body {
    margin:0;
    font:12px/15px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#8a8a8a;
    min-width:1000px;
    background:#fff;
    min-height:100%!important;
}

#wrapper {
    position:relative;
    min-height:100%;
    overflow:hidden;
    background:url(../images/wrapper.jpeg) repeat-y;
}
#content {
    float:left;
    width:100%;
    min-height:100%;
}

Answer 1

100% is just getting set to 100% of the content in it , try using a pixel height instead

#content {
    float:left;
    width:100%;
    min-height:500px;
}

Answer 2

I would put a min-height in pixels on your wrapper. Since the #content is set to 100% height, it will fill all of the wrapper.

This way, if there is less content than needed to fill the full height of the browser, the page will add whitespace below your content to fill the browser height. I do this often when first building out a new page, since I don't have any content, but want to get an idea of how it will look when filling the browser window.

I would suggest doing something like this:

#wrapper {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    background: url(../images/wrapper.jpeg) repeat-y;
}

You might want to adjust the min-height in pixels to fit your site- whatever it takes to make it fill the browser window.