header

main

        html, body, header, main, nav, footer{
            box-sizing: border-box;
            margin: 0; padding: 0;
            border: 1px solid red;
        }
        
        html, body{
            width: 100%;
            height: 100%; 
        }
        
        header{
            width: 100%;
            height: 100px;
        }
        
        main{ 
            padding: 1rem;
            float: right; 
            width: 80%;
            /* 単位が混在する高さを計算する。 */
            height: calc(100% - 100px - 2rem); 
            overflow: auto;  /* 内容がはみ出た場合にスクロールバーを表示 */
        }
        
        nav{ 
            float: left; 
            width: 20%;
            /* 単位が混在する高さを計算する。 */
            height: calc(100% - 100px - 2rem); 
            overflow: auto;  /* 内容がはみ出た場合にスクロールバーを表示 */
        }
        
        footer{ 
            clear: both; 
            height: 2rem;
        }