Use absolute positioning to achieve left, middle and right layout, and why is there an exception when the sub-div height (height) setting is 100%?

<!DOCTYPE html>
<html>
<head>
    <title>
        
    </title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="demo13.css">
</head>
<body>
    <div id="container">
        <div id="middle">
        
        </div>
        <div id="left">
        
        </div>
        <div id="right">
        
        </div>
    </div>
</body>
</html>
< hr >
-sharpcontainer{
    height: 300px;
    padding-left: 210px;
    padding-right: 110px;

}

-sharpmiddle{
    width: 100%;
    height: 100%;
    background-color: lightskyblue;
    /*
    *margin-left: 10px;
    *margin-right: 10px;
    containerpadding210margin
    */
}

-sharpleft{
    width: 200px;
    height: 100%;
    background-color: orange;
    position: absolute;
    left: 8px;
}

-sharpright{
    width: 100px;
    height: 100%;
    background-color: blue;
    position: absolute;
    right: 8px;
}

-sharpmiddle,-sharpleft,-sharpright{
    float: left;
}
![][1]
Jun.22,2022

-sharpcontainer{
    height: 300px;
    padding-left: 210px;
    padding-right: 110px;
    position:relative;//
}

you need to add a position:relative

to the box-sharpcontainer.
Menu