Question

我遇到问题，我的某个div content_wrap没有接受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;
}

我的CSS会出现什么问题？

Answer 1

将height:100%;添加到#center_content而不是height:auto。这可能会起作用

div没有采取最小高度百分比

1 个答案: