Разрешение ограниченного доступа пользователей Wi-Fi

Фактически вы можете использовать display: table, чтобы разделить область на два элемента (заголовок и содержимое), где заголовок может меняться по высоте, а контент заполняет оставшееся пространство. Это работает со всей страницей, а также когда область является просто содержимым другого элемента, расположенного с position, установленным на relative, absolute или fixed. Он будет работать до тех пор, пока родительский элемент имеет ненулевую высоту.

См. Этот скрипт , а также следующий код:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

    

        
This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.
        

    
    

        

            
This is the actual content that takes the rest of the available space.