Блог

Главная - Вопросы по программированию - min-height исправляет высоту

min-height исправляет высоту

#html #css #height

#HTML #css #высота

Вопрос:

Я разработал веб-страницу, но до сих пор у меня серьезная проблема, из-за которой я не могу найти ответ. Разметка 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;;
    }

И теперь результат таков:

Результат

Я хочу знать, почему высота div body класса и div of context class не соответствует его дочерним элементам, почему они переполнены? Но div of class middle-block имеет высоту своих дочерних элементов.

Ответ №1:

Попробуйте с небольшим изменением- overflow: auto; 

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

Комментарии:

1. Ваш ответ был превосходным… я имею в виду, что в моем коде требовалось наименьшее изменение, все было исправлено!!! большое вам спасибо 😉

Ответ №2:

Сделайте parent: display: встроенным блоком; и children: display: встроенным; Если вы хотите, чтобы родительские элементы растягивались до самого длинного дочернего элемента, тогда вы также можете попробовать отобразить таблицу и отобразить ячейку таблицы.

Ответ №3:

Добавить переполнение: скрыто в .context. Это выполняет работу больше раз, чем height: 100%. То же самое относится и к .body.