把一个jsp分为两个div布局记录

一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错，但当你想要某一个div在某一时刻占据整个页面的大小，而第二个div则不显示。这时，可以在两个div之间加上左右箭头的图标，点击图标时控制两个div的width就可以了。

实现不难，记下以备查。

	<div id="CententDiv">
		<jsp:include flush="true" page="ags_map.jsp"></jsp:include>
	</div>
	<div class="resizeRight">
		<img id="resizeImg" src="/epub_web/util_web/jsp/login/image/toright.gif" alt="隐藏右边" style="cursor:hand" onClick="changeRightSize();">
	</div>
	<div id="RightDiv">
		<jsp:include flush="true" page="right_menu.jsp"></jsp:include>
	</div>

 

div#RightDiv {
    float: right; 
    overflow-y:hidden;
    overflow-x:scroll;
 	width: 20%; 
    height: 100%;
}
div#CententDiv {
	left:0;
	top:0;
  	float: left;  
   	width: 80%;   
	height: 100%;
    margin: 0px;
}
.resizeRight{
	position:absolute;
	left:expression(this.previousSibling.clientWidth-this.clientWidth;
	top:expression(this.previousSibling.clientHeight/2-this.clientHeight/2);
} 

 

function changeRightSize(){
	var resizeImgSrc = document.getElementById("resizeImg").src;
	if(resizeImgSrc.indexOf("right")!=-1){
		document.getElementById("resizeImg").src = "/epub_web/util_web/jsp/login/image/toleft.gif";
		document.getElementById("CententDiv").style.width = "100%";
		document.getElementById("RightDiv").style.width = "0%";
	}
	if(resizeImgSrc.indexOf("left")!=-1){
		document.getElementById("resizeImg").src = "/epub_web/util_web/jsp/login/image/toright.gif";
		document.getElementById("CententDiv").style.width = "80%";
		document.getElementById("RightDiv").style.width = "20%";
	}
}

 

代码很简单，就不多说了，主要是展示得美观些。如果想在一个页面用div布局都差不多思路。注意以下几点：

1、css里通过float来得到流的方向。

2、css里用expression来动态得到图标的位置。并且通过this.previousSibling来得到第一个div，通过它的clientWidth和clientHeight来确定图标的位置。

3、通过    overflow-y:hidden;overflow-x:scroll;来设定overflow分为横与纵时的处理。