外部div的自动高度

时间：2015-08-01 19:23:25

标签： html css

我知道在此之前已经问过这个问题，但是我尝试过5种不同的方式来自Stack和5来自其他网站，我似乎无法找到合适的方式。
这是一个简单的问题，php_content div不会变大，因为它应该放入内容。

    /******************************************************
    / CSS RESET
    /*****************************************************/
    
    html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
    h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
    ul,ol {list-style:none;}
    fieldset,img,hr {border:none;}
    caption,th {text-align:left;}
    table {border-collapse:collapse; border-spacing:0;}
    td {vertical-align:top;}
    
    /*****************************************************/
    
    *{
        box-sizing: border-box;
    
        float: left;
    }
    
    .container{
        width: 1000px;
        height: 600px;
    }
    
    .code{
        float: left;
    
        width: 800px;
        height: 600px;
    
        background-color: #333333;
    
        font-weight: bold;
    }
    
    .php{
        position: relative;
    
        top: 100px;
        left: 100px;
    }
    
    .php_start,
    .if_start{
        display: inline-block;
        clear: left;
    
        height: 15px;
        min-width: 100px;
    
        background-color: #CD8B32;
    
        border-radius: 5px 5px 5px 0;
    }
    
    .php_start span,
    .if_start span{
        margin-left: 20px;
    
        color: white;
        font-size: 12px;
    }
    
    .php_content,
    .if_content{
        display: inline-block;
        clear: left;
    
        min-width: 100px;
        min-height: 50px;
    
        border-left: 10px solid #CD8B32;
    }
    
    .php_end,
    .if_end{
        display: inline-block;
        clear: left;
    
        height: 15px;
        min-width: 100px;
    
        background-color: #CD8B32;
    
        border-radius: 0 5px 5px 5px;
    }
    
    .code .if{
        position: absolute;
    }
    
    .toolbox{
        float: left;
    
        width: 200px;
        height: 600px;
    
        background-color: #333333;
    
        border-left: 2px solid lightgrey;
    }
    <div class="container">
        <div class="code">
            <div class="php">
                <div class="php_start">
                    <span>PHP</span>
                </div>
                <div class="php_content">
                    <div class="if">
                        <div class="if_start">
                            <span>IF</span>
                        </div>
                        <div class="if_content">
                            <div style="height: 100px;"></div>
                        </div>
                        <div class="if_end"></div>
                    </div>
                </div>
                <div class="php_end"></div>
            </div>
        </div>
        <div class="toolbox">
            <div class="if">
                <div class="if_start">
                    <span>IF</span>
                </div>
                <div class="if_content">
    
                </div>
                <div class="if_end"></div>
            </div>
        </div>
    </div>

2 个答案:

答案 0 :(得分：3)

您的php_content div包含一个绝对定位的div，这意味着php_content无法匹配其内容的大小。

修复方法是删除它：

.code .if{
    position: absolute;
}

直播示例：

/******************************************************
/ CSS RESET
/*****************************************************/

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

/*****************************************************/

*{
    box-sizing: border-box;

    float: left;
}

.container{
    width: 1000px;
    height: 600px;
}

.code{
    float: left;

    width: 800px;
    height: 600px;

    background-color: #333333;

    font-weight: bold;
}

.php{
    position: relative;

    top: 100px;
    left: 100px;
}

.php_start,
.if_start{
    display: inline-block;
    clear: left;

    height: 15px;
    min-width: 100px;

    background-color: #CD8B32;

    border-radius: 5px 5px 5px 0;
}

.php_start span,
.if_start span{
    margin-left: 20px;

    color: white;
    font-size: 12px;
}

.php_content,
.if_content{
    display: inline-block;
    clear: left;

    min-width: 100px;
    min-height: 50px;

    border-left: 10px solid #CD8B32;
}

.php_end,
.if_end{
    display: inline-block;
    clear: left;

    height: 15px;
    min-width: 100px;

    background-color: #CD8B32;

    border-radius: 0 5px 5px 5px;
}

.toolbox{
    float: left;

    width: 200px;
    height: 600px;

    background-color: #333333;

    border-left: 2px solid lightgrey;
}
<div class="container">
    <div class="code">
        <div class="php">
            <div class="php_start">
                <span>PHP</span>
            </div>
            <div class="php_content">
                <div class="if">
                    <div class="if_start">
                        <span>IF</span>
                    </div>
                    <div class="if_content">
                        <div style="height: 100px;"></div>
                    </div>
                    <div class="if_end"></div>
                </div>
            </div>
            <div class="php_end"></div>
        </div>
    </div>
    <div class="toolbox">
        <div class="if">
            <div class="if_start">
                <span>IF</span>
            </div>
            <div class="if_content">

            </div>
            <div class="if_end"></div>
        </div>
    </div>
</div>

答案 1 :(得分：1)

/******************************************************
    / CSS RESET
    /*****************************************************/
    
    html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
    h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
    ul,ol {list-style:none;}
    fieldset,img,hr {border:none;}
    caption,th {text-align:left;}
    table {border-collapse:collapse; border-spacing:0;}
    td {vertical-align:top;}
    
    /*****************************************************/
    
    *{
        box-sizing: border-box;
    
        float: left;
    }
    
    .container{
        width: 1000px;
        height: 600px;
    }
    
    .code{
        float: left;
    
        width: 800px;
        height: 600px;
    
        background-color: #333333;
    
        font-weight: bold;
    }
    
    .php{
        position: relative;
    
        top: 100px;
        left: 100px;
    }
    
    .php_start,
    .if_start{
        display: inline-block;
        clear: left;
    
        height: 15px;
        min-width: 100px;
    
        background-color: #CD8B32;
    
        border-radius: 5px 5px 5px 0;
    }
    
    .php_start span,
    .if_start span{
        margin-left: 20px;
    
        color: white;
        font-size: 12px;
    }
    
    .php_content,
    .if_content{
        display: inline-block;
        clear: left;
        height: auto !important;
        min-width: 100px;
        min-height: 50px;
    
        border-left: 10px solid #CD8B32;
    }
    
    .php_end,
    .if_end{
        display: inline-block;
        clear: left;
    
        height: 15px;
        min-width: 100px;
    
        background-color: #CD8B32;
    
        border-radius: 0 5px 5px 5px;
    }
    
    .code .if{
        position: relative;
    }
    
    .toolbox{
        float: left;
    
        width: 200px;
        height: 600px;
    
        background-color: #333333;
    
        border-left: 2px solid lightgrey;
    }
<div class="container">
        <div class="code">
            <div class="php">
                <div class="php_start">
                    <span>PHP</span>
                </div>
                <div class="php_content">
                    <div class="if">
                        <div class="if_start">
                            <span>IF</span>
                        </div>
                        <div class="if_content">
                            <div style="height: 100px;"></div>
                        </div>
                        <div class="if_end"></div>
                    </div>
                </div>
                <div class="php_end"></div>
            </div>
        </div>
        <div class="toolbox">
            <div class="if">
                <div class="if_start">
                    <span>IF</span>
                </div>
                <div class="if_content">
    
                </div>
                <div class="if_end"></div>
            </div>
        </div>
    </div>

将position: absolute块中的relative更改为.code .if。这样，引用将被设置为包含它的div。

相关问题
最新问题