Загрузить функцию изображения формы JSON URL

У меня была такая же проблема, но я не мог решить проблему с помощью flexbox выше. Поэтому я создал свой собственный шаблон, который включает в себя:

• заголовок с элементом фиксированного размера
• нижний колонтитул
• боковой панель с полосой прокрутки, которая занимает остальную высоту
• content

Я использовал flexboxes, но более простым способом, используя только отображение свойств: flex и flex-direction: row | column:

Я использую угловые и хочу, чтобы размеры моего компонента составляли 100% от их родительского элемента.

Ключ должен установить размер (в процентах) для всех родителей, чтобы ограничить их размер , В следующем примере высота myapp имеет 100% окна просмотра.

Основной компонент имеет 90% окна просмотра, потому что верхний и нижний колонтитулы имеют 5%.

Я разместил здесь свой шаблон : https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

    

        HEADER
        


    
    

        

            SIDEBAR
            

            

            

            

            

            

            

            

        
        

            CONTENT
        
    
    

        FOOTER