div not taking min-height in percentage

StackOverflow https://stackoverflow.com/questions/22808824

  •  26-06-2023
  •  | 
  •  

题

I'm facing problem that one of my div content_wrap not taking it's min-height:100%

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="css/main_style.css">


    </head>
    <body>
        <div id="header">

        </div>
        <div id="center_content_common">
            <div id="menu_wrap">

            </div>
            <div id="content_wrap">
                <div id="content_block">
                </div>
            </div>
        </div>
        <div id="footer">

        </div>
    </body> 
</html>

CSS

html,body
 {
    padding:0px;
    margin:0px;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    height:100%;
    width:100%;
 }
 #header
 {
    width:100%;
    height:15%;
    background-image:url('../images/header_gradient.png');
    background-repeat:repeat-y;
    background-size:100% 100%;
    border-bottom:3px solid #b8babc;
 }
#center_content
{
    min-height:79%;
    height:auto;
    background-image:url('../images/content_area_gradient.png');
    background-repeat:repeat-x;
    background-size:100% 100%;
    overflow:auto;

}
#center_content_common
{
    min-height:79%;
    width:100%;
    height:auto;
    overflow:auto;
}
#content_wrap
{
    min-height:500px;
    width:84.5%;
    float:right;
    background-image:url('../images/content_area_gradient.png');
    background-repeat:repeat-x;
    background-size:100% 100%;

}
#content_block
{
    min-height:100%;
    width:100%;
    margin:auto;
}
#menu_wrap
{
    width:15%;
    min-height:100%;
    height:auto;
    float:left;
}
#footer
{
    height:5%;
    width:100%;
    background-image:url('../images/footer_gradient.png');
    background-repeat:repeat-y;
    background-size:100% 100%;
    border-top:3px solid #b8babc;
}

What could be the possible problem with my css?

有帮助吗？

解决方案

Add height:100%; to your #center_content insteed of height:auto. This will probably work

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top