& lt; ! DOCTYPE html>
& lt; Html>

& lt; Head>
& lt; Meta HTTP - equiv="content-type" Content="text/HTML. Charset=utf-8 "/& gt;
& lt; Title> About to drag the contents of the display area & lt;/title>
& lt; Style>
Ul,
Li {
margin: 0;
padding: 0;
}

Body {
1.5 Arial font: 14 px/;
Color: # 666;
}

# box {
position: relative;
width: 100%;
height: 100%;
Border: 2 px solid # 000;
Margin: 10 px auto;
overflow: hidden;
}

# box ul {
The list - style - position: inside;
Margin: 10 px;
}

# top {
Color: # FFF.
Width: 220 px;
height: 100%;
overflow: hidden;
}

# bottom {
Color: # FFF.
float: left;
height: 100%;
position: absolute;
Left: 220 px;
width: 100%;
}

# top {
background: green;
Float: left
}

# line {
position: absolute;
top: 0;
Left: 220 px;
height: 100%;
Width: 4 px;
overflow: hidden;
background: red;
Cursor: w - resize;
}
& lt;/style>
& lt; Script>
The function of $(id) {
Return the document. The getElementById (id)
}
Window. The onl oad=function () {
Var oBox=$(" box "),
OTop=$(" top "),
OBottom=$(" bottom "),
OLine=$(" line ");
OLine. onm ousedown=function (e) {
Var disX=(e | | event) clientX;
OLine) left=oLine) offsetLeft;
Document. The onm ousemove=function (e) {
IT=oLine var. Left + ((e | | event). The clientX - disX);
Var e=e | | window. The event,
Tarnameb=e. arget | | e.s rcElement;
Var maxT=oBox. ClientWight - oLine. OffsetWidth;
OLine. Style. Margin=0;
IT & lt; 0 & amp; & (iT=0);
IT & gt; MaxT & amp; & (iT=maxT);
OLine. Style. Left=oTop. Style. The width=iT + "px";
OBottom. Style. Left=oBox. Style. Left + iT + "px";
$(" MSG "). The innerText='top. Width: + oLine. Style. The width +' - bottom. Width: '+ oBottom. Style. The width +' - oLine. OffsetLeft: '+ oLine. The offsetLeft +' - disX: '+ disX +' - tarnameb: '+ tarnameb. TagName.
Return false
};
Document. The onm ouseup=function () {
Document. The onm ousemove=null;
Document. The onm ouseup=null;
OLine. ReleaseCapture & amp; & OLine. ReleaseCapture ()
};
OLine. SetCapture & amp; & OLine. SetCapture ();
Return false
};
};
& lt;/script>
& lt;/head>

& lt; Body>
& lt; Center> Article about drag the red change the width of the display area & lt; Span id="MSG" & gt; & lt;/span> & lt;/center>
& lt; Div id="box" & gt;
& lt; Div id="top" & gt;
& lt; ul>
& lt; li> & lt; A href="https://bbs.csdn.net/topics/#" target="_blank" & gt; 1111 & lt;/a> & lt;/li>
& lt; li> & lt; A href="https://bbs.csdn.net/topics/#" target="_blank" & gt; 2222 & lt;/a> & lt;/li>
& lt; li> & lt; A href="https://bbs.csdn.net/topics/#" target="_blank" & gt; 3333 & lt;/a> & lt;/li>
& lt; li> & lt; A href="https://bbs.csdn.net/topics/#" target="_blank" & gt; 4444 & lt;/a> & lt;/li>
& lt; li> & lt; A href="https://bbs.csdn.net/topics/#" target="_blank" & gt; 555555 & lt;/a> & lt;/li>
& lt; li> & lt; A href="https://bbs.csdn.net/topics/#" target="_blank" & gt; 6666666 & lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; Div id="bottom" style="left: 220 px;">
& lt; Div style="background - color: # FFFFFF; "& gt;
& lt; Div id="TAB - the content" style="" & gt;

& lt; Div role="tabpanel data -" pageid="10008" & gt; & lt; Iframe SRC="https://bbs.csdn.net/C:/Users/wan/Desktop/htwz/pages/index.hte.html" frameborder="no" id="iframe_10008 data -" pageid="10008" style="width: 100%; Height: 688 px;"> & lt;/iframe> & lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; Div id="line" & gt; & lt;/div>
& lt;/div>
& lt;/body>

& lt;/html>

Above is a drag and drop the red about change of the width of the div, but only can't seem to be right left ifame, how can I change?