1 by the positioning and layout of floating
frame:
html，body{
height: 100%; (it always occupies the entire height of the viewport height)
margin: 0; (to remove the outer border)
}
Outside the big box
Set Color
A positioning layout position: relative (relative positioning, in order to allow the lower half of the box has a reference target)
Head box
Set the color and height
The lower half of the box:
Setting the lower half 100% width and height, color
Absolute positioning is set to position: absolute;
Setting top value, top: the upper half of the height of the box (after the first half of the sub-element does not need to set the position)
The left navigation bar
Provision of the floating float: left;
Set the color, width, height of 100%;
The right side of the box contents
Set the border outside the left margin-left: the left navigation bar height
Set the color, padding within set borders
Content box
Set Color
Width and height, border-radius fillet
overflow-y：auto；
2. Use a telescopic cartridge arrangement
frame:
html，body{
height: 100%; (it always occupies the entire height of the viewport height)
margin: 0; (to remove the outer border)
}
Large external box provided telescopic box layout display: flex;
Y-axis spindle flex-direction: column;
Head box
flex-basis (height, because the Y-axis of the spindle)
The lower half of the box:
flex-grow: 1 (box remaining space except the upper half of the lower half cartridge are)
Setting the lower half cartridge telescopic box layout display: flex;
overflow-y: scroll; (this must be added, otherwise it will not show the effect of the background)
The left navigation bar
flex-basis (this is the width, because the parent element is a spindle axis X)
The right side of the box contents
flex-grow: 1 (the left lower half of the other remaining space except gave the right)
Content box
overflow-y: scroll; (vertical scroll bars appear automatically)
ps: add color, only to see the box
Note that there are two telescopic box overflow-y: scroll; must not be missing