Small CSS experience: vertical, up/down height, adaptive in the middle

Today, I made a CSS style as required. In a DIV, the upper and lower heights are fixed and the middle is adaptive.

See the sample code below:

<Div id = container> <Div id = "TOP"> upper fixed height 100px </div> <Div id = "Middle"> central adaptive height </div> <Div ID = "bottom"> fixed bottom height 100px </div>

 

/* CSS file */# container {width: 100%; Height: 100%; position: relative;} # top {width: 100%; Height: 100px; position: absolute; top: 0; left: 0 ;}# middle {width: 100%; Height: 100px; position: absolute; // use absolute positioning to achieve adaptive top: 100px; bottom: 100px ;} # bottom {width: 100%; Height: 100px; position: absolute; bottom: 0; left: 0 ;}