<! Doctype HTML>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/CSS">
*
{
Margin: 0;
Padding: 0;
}
# maintop
{< br> Height: 90px;
overflow: hidden;
}
# bottomleft
{< br> Height: 100%;
width: 15%;
float : Left;
overflow: hidden;
position: relative;
}
# bottomright
{< br> Height: 100%;
width: 85%;
float : Left;
overflow: hidden;
}
# split
{< br> width: 10px;
Height: 100%;
Background: black;
position: absolute;
right: 0;
top: 0;
}
# Leftcontent
{
Height: 100%;
Overflow: auto;
Margin-Right: 10px;/*The width is the same as the split width.*/
}
# Rightcontent
{
Height: 100%:
Overflow: auto;
}
</Style>
</Head>
<Body>
<Div>
<Div id = "maintop"> C </div>
<Div id = "mainbottom">
<Div id = "bottomleft">
<Div id = "split"> </div>
<Div id = "leftcontent">
Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabe
</Div>
</Div>
<! -- Why is there another rightcontent set in bottomright: When you set margin or padding for bottomright, it will add
The width of margin or padding causes overflow. Set another rightcontent in it to make the rightcontent width automatic. When the margin or padding of rightcontent is set, the overall position of the content remains unchanged and the content width is automatically reduced,
Width of margin or padding + width = width of rightcontent
-->
<Div id = "bottomright">
<Div id = "rightcontent"> B </div>
</Div>
<Div style = "clear: Both;"> </div>
</Div>
</Div>
</Body>
<SCRIPT type = "text/JavaScript">
VaRDocheight = document.doc umentelement. clientheight;
VaRMainbottom = Document. getelementbyid ("mainbottom ");
//90: the height of maintop
Mainbottom. style. Height = (docheight-90). tostring () + "PX ";
document. getelementbyid ("bottomleft "). onscroll = function () {
document. getelementbyid ("split "). style. position = "absolute";
document. getelementbyid ("split "). style. right = "2px";
};