html min-height固定高度

mwngjboj 于 2023-04-18 发布在其他

关注(0)|答案(3)|浏览(118)

我已经设计了一个网页，但到现在为止，我有一个坏问题，我找不到答案。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的高度和context类的div不匹配，为什么它们溢出？但是classmiddle-block的div有它的孩子的高度。

Html

来源：https://stackoverflow.com/questions/24583559/min-height-fixes-the-height

3条答案

按热度按时间

acruukt91#

尝试一点变化-overflow: auto;

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

赞(0）回复(0）举报 2023-04-18

8yparm6h2#

成为父级：显示：内联块;和儿童：display：inline;如果你想让父项延伸到最长的子项，那么你可以尝试显示表格和显示表格单元格。

赞(0）回复(0）举报 2023-04-18

dwthyt8l3#

将overflow：hidden添加到. context中。这比height：100%执行的次数更多。同样适用于.body。

赞(0）回复(0）举报 2023-04-18