I wrote a piece of css code, but there is a large blank after it. How to solve it?

I want to leave 20px on the div of container, 20px on the header and 20px on the footer, and then the rest of the page is full of container

the right side leaves 20px for right, and the rest is container,. Don"t leave blank

now, although I set the height of container to 100%, it still leaves a big blank. What is the reason for this

how to modify to make the white space disappear.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style>
div {
    box-sizing: border-box;
}

.header {
    height: 20px;
    background: rgba(51,255,255,1);
}

.container {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    background: rgba(51,0,153,1);
    height: 100%;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    background:rgba(204,0,51,1);
    height: 100%
}

.footer {
    height: 20px;
    background: rgba(153,0,0,1);
}

</style>

</head>

<body>

<div>

    <div class="header"></div>

    <div class="container">
        <div class="list">
            
        </div>
        
        <div class="right">
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </div>
    
    </div>
    
    <div class="footer"></div>

</div>

</body>
</html>

the modified code will still appear a large amount of blank space

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style>

html, body, div, p, ul, li, ol, dl, dt, dd, pre, code, table, tr, td, form, fieldset,
legend, button, input, textarea, h1, h2, h3, h4, h5, h6, hr, blockquote {
    margin: 0;
    padding: 0;
}


div {
    box-sizing: border-box;
}


html {
    height: 100%;
}

.header {
    height: 20px;
    background: rgba(51,255,255,1);
}

.container {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    background: rgba(51,0,153,1);
    height: 100%;
}

.container ul {
    list-style: none;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    background:rgba(204,0,51,1);
    height: 100%
}

.footer {
    height: 20px;
    background: rgba(153,0,0,1);
}

</style>

</head>

<body>

<div>

    <div class="header"></div>

    <div class="container">
        <div class="list">
            
        </div>
        
        <div class="right">
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </div>
    
    </div>
    
    <div class="footer"></div>

</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { padding: 0; margin: 0; } ul,li{ list-style: none; } div { box-sizing: border-box; } .header { height: 20px; background: rgba(51,255,255,1); } .container { position: relative; padding-top: 20px; padding-bottom: 20px; padding-left: 50px; background: rgba(51,0,153,1); height: calc(100vh - 40px); } .right { position: absolute; right: 0; top: 0; width: 50px; background:rgba(204,0,51,1); height: 100% } .footer { height: 20px; background: rgba(153,0,0,1); } </style> </head> <body> <div> <div class='header'></div> <div class='container'> <div class='list'> </div> <div class='right'> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> </div> <div class="footer"></div> </div> </body> </html>