关于div自适应页面宽度问题

各位仁兄,小弟写了个jsp,页面左右两块都是一个div,当右边的div内容所占不多时,页面没有问题,可是当我从后台把拼出的内容(一个table)放进来时,由于table的宽度原因,右边的div显示就会出问题,显示到页面底部去了!而我想达到的效果是,如果table很宽,则右边的div就生成一个滚动条,可以拖动,以适应整个页面.希望哪位指点一下,先谢了...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="<%=basePath%>/js/DocClassTree.js"></script>
<title>AttributesAssociated</title>
<link rel="StyleSheet" href="<%=basePath%>/css/dtree.css"
type="text/css" />
<link rel="StyleSheet" href="<%=basePath%>/css/Wcm.css"
type="text/css" />
</head>
<style>
.div{
overflow-x:scroll;
overflow-y:scroll;
}
</style>
<body style="overflow: auto;"
onload="Splitter.init({id: 'splitter_Container'});">
<!--table of overall layout  -->
<div id="splitter_container">
<!-- left of table navigation  -->
<div id="splitter_left_panel">
<table width="100%">
<tr>
<td>
<div class="dtree" id="docClassTree" style="overflow: auto">
<script type="text/javascript">
dcTree=new dTree('dcTree', 'docClassTree');
dcTree.add(0, -1, '中海油天津分公司文档', '','',  '','','','false','cnoocDoc');
dcTree.draw();
</script>
</div>
</td>
</tr>
</table>
</div>
<!-- spliter -->
<div id="splitter_bar"></div>
<!-- center of table content -->
<div id="splitter_right_panel" class="div">
<!-- 初始化页面的显示信息 -->
<div id="welcomDiv">
<font class="wcmListViewText">请点击需要的文档类型进行相关设置...</font>
</div>
<!-- 主设置层  -->
<div id="mainContentDiv" style="display: none">
<table width="100%">
<tr>
<td>
<table>
<tr>
<td class="wcmNavigationLabel" valign="baseline">
文档类型:
</td>
<td>
<table>
<tr>
<td valign="baseline">
<span id="dsShow" class="wcmListViewText"></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wcmNavigationLabel" valign="baseline">
主属性:
</td>
<td valign="baseline">
<div id="majorShowDiv"></div>
</td>
</tr>
<tr>
<td class="wcmNavigationLabel" valign="top">
从属性:
</td>
<td valign="baseline">
<div id="subordinateShowDiv"></div>
</td>
</tr>
<tr>
<td colspan="2" valign="baseline">
<div id="propSelectDiv"></div>
</td>
</tr>
<tr>
<td class="wcmNavigationLabel" colspan="2" valign="baseline">
<label onmouseover="this.style.cursor='hand'"
onclick="settingPropValues()" title="点击进行设置">
修改属性值:
</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="resultDiv" class="div"></div>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="" id="sClassName" />
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

解决方案 »

  1.   


    第一个div要固定大小，并且靠左边显示。
    .div1{
    width: 80%;
    float: left;
    }
    第二个div的布局要也左边的为主。
    .div2{
    float: left;
    }
    至于table很宽的时候显示滚动条，可以用表达式
    expression
      

  2.   

    谢谢各位了,问题已经解决了.
    如2楼所说的那样,利用css设下右边div的属性.outDiv{
    position: relative;
    overflow-x:scroll;
    overflow-y:scroll;
    }
    .innerDiv{
    position: absolute;
    width:auto;
    height:auto;
    overflow-y:scroll;
    }
    结帖给大家散分了...