Question

我设计了一个网页但到目前为止我遇到了一个我无法找到答案的问题。 HTML标记如下所示：

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>

    <body>

        <div class="strip">
            <div class="menu-item-holder">
                <div class="menu-item">
                    item1
                </div>
                <div class="menu-item">
                    |
                </div>
                <div class="menu-item">
                    item2
                </div>
                <div class="menu-item">
                    |
                </div>
                <div class="menu-item">
                    item3
                </div>
                <div class="menu-item">
                    |
                </div>
                <div class="menu-item">
                    item4
                </div>
            </div>
        </div>

        <div class="body">

            <div class="context">

                <div class="header">

                </div>

                <div class="sticky-menu">

                    <div class="menu-item-holder">

                        <div class="menu-item">
                            item1
                        </div>
                        <div class="menu-item">
                            |
                        </div>
                        <div class="menu-item">
                            item2
                        </div>
                        <div class="menu-item">
                            |
                        </div>
                        <div class="menu-item">
                            item3
                        </div>
                        <div class="menu-item">
                            |
                        </div>
                        <div class="menu-item">
                            item4
                        </div>

                    </div>

                </div>

                <div class="upper-divs">

                    <div class="up-left-div">

                    </div>

                    <div class="up-right-div">

                    </div>

                </div>

                <div class="left-block">

                </div>

                <div class="middle-block">

                    <div class="post">

                    </div>

                    <div class="post">

                    </div>

                    <div class="post">

                    </div>

                    <div class="post">

                    </div>

                    <div class="post">

                    </div>

                    <div class="post">

                    </div>

                </div>

                <div class="right-block">

                </div>

            </div>

            <div class="footer">

            </div>

        </div>

    </body>
    </html>

And the style is like this:

    @charset "utf-8";
    /* CSS Document */

    .body{
        width:1000px;
        height:100%;
        min-height:1600px;
        background:#cccccc;
        direction:rtl !important;
        text-align:right !important;
        margin:0 auto;
        padding-top:40px;
    }

    .strip{
        width:100%;
        min-height:50px;
        background:#212121;
        direction:rtl !important;
        text-align:center !important;
        margin:0 auto;
        position:absolute;
        left:0px;
        top:0px;
    }

    .menu-item-holder{
        margin:0 auto !important;
        text-align:center;
        padding:11px;
    }

    .menu-item{
        display:inline;
        direction:rtl;
        color:#fff;
    }

    .context{
        background:#a0a0a0;
        width:86%;
        height:100%;
        min-height:1350px;
        direction:rtl !important;
        text-align:right !important;
        margin:0 auto;
    }

    .footer{
        width:99.8%;
        min-height:200px;
        background:#212121;
        direction:rtl !important;
        text-align:right !important;
        margin:0 auto;
    }

    .header{
        width:99.8%;
        min-height:350px;
        background:#ec2327;
        direction:rtl !important;
        text-align:right !important;
        margin:0 auto;
    }

    .sticky-menu{
        width:99.8%;
        min-height:50px;
        background:#212121;
        direction:rtl !important;
        text-align:right !important;
        margin:0 auto;
        text-align:center;
        padding-top:11px;
    }

    .upper-divs{
        margin-top:5px;
        width:99.8%;
        min-height:206px;
    }

    .up-left-div{
        width:49%;
        min-height:200px;
        background:white;
        float:left;
    }

    .up-right-div{
        width:49%;
        min-height:200px;
        background:white;
        float:right;
    }

    .left-block{
        width:18%;
        min-height:200px;
        background:white;
        float:left;
    }

    .middle-block{
        width:61.8%;
        min-height:200px;
        background:black;
        float:left;
        margin-left:1%;
        margin-right:1%;
    }

    .right-block{
        width:18%;
        min-height:200px;
        background:white;
        float:left;
    }

    .post{
        width:98%;
        min-height:200px;
        background:red;
        float:left;
        margin:5px;;
    }

现在结果如下：

result

我想知道，为什么body类的div的高度和div类的context的高度与它的孩子不匹配，为什么他们为什么满溢？但div class的{{1}}有其子女的身高。谢谢大家。

Answer 1

Make parent：display：inline block;和孩子：显示：内联;如果您希望父母伸展到最长的孩子，那么您也可以尝试显示表格并显示表格单元格。

Answer 2

添加溢出：隐藏到.context。这比高度更有效：100％。这同样适用于.body。

Answer 3

尝试稍加改动 - overflow: auto;

.context{
    background:#a0a0a0;
    width:86%;
    height:100%;
    min-height:1350px;
    direction:rtl !important;
    text-align:right !important;
    margin:0 auto;
    overflow: auto;
}

最小高度固定高度

3 个答案: