Я пытаюсь сделать стандартный макет сайта сзаголовок,Панель навигации тело (справа отПанель навигации) исноска.

Теперь я уже сделал это:

    
        Test
        
        

            .header {
                float: top;
                width: 100%;
                height: 75px;
            }

            .navbar {
                float: left;
                width: 20%;
                height: 100%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }

            .body {
                float: right;
                width: 80%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }
            .footer {
                float: bottom;
                width: 100%;
            }
        
    
    
         Header 
         Nav Bar 
         Body 
         Footer
    

который производит это:

Теперь, если мы проверим CSS:

.navbar {

    float: left;
    width: 20%;
    height: 100%;
    min-height: 100%;
    overflow: scroll;
}

.body {
    float: right;
    width: 80%;
    height: 100%;
    min-height: 100%;
    overflow: scroll;
}

Как вы можете видеть, я попытался установитьрост а такжемин-высота как тела, так инавигационная панель заполнить оставшееся вертикальное пространство, т.е.

Тем не менее, это не влияет на это. Однако если я сделаюheight: 500px размер изменяется, как и ожидалось (конечно, сейчас это не будет хорошей практикой, так как при разных размерах экрана и т. д. будет отображаться другая часть или вид страницы):

В общем, я спрашиваю, как бы я мог сделатьdivs заполнить вертикальное пространство, котороеосталось без использования какого-либо жестко закодированного значения, т.е.100px скорее я хотел бы сделать это в процентах, таким образом, страница будет выглядеть одинаково во всех браузерах