您的位置：首页 > Web前端 > CSS

CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIV Layout, one column's width depend on the other's）

2008-08-26 18:47 751 查看

一个客户说要用DIV+CSS布局，两列，其中导航列宽度不确定（由里面的TreeView控件确定），而与它并列的内容列宽度要做到自适应，也就是

内容列宽度+导航列宽==固定值（总宽度）

但是，内容列宽度和导航列宽都没有一个定值，而网上的大多自适应列宽代码都是基于一个定值的

无奈，我写Winform出身的对CSS+DIV知之甚少，只能通过JavaScript来完成了，效果还可以，IE7.0和Firefox2.0测试通过

下面的代码中，导航列没有定义宽度，其实际宽度要靠里面的内容而确定：

效果图，右边为导航列（不习惯吧，呵呵，客户阿拉伯的）：

<html>

<head>

<title></title>

<script type="text/javascript">

window.onload = function(){

document.getElementById("left").style.width=(773-(document.getElementById("right").clientWidth))+"px";

}

</script>

<style type="text/css">

body

{

background: #999;

text-align: center;

color: #333;

font-family: Verdana, Arial, Helvetica, sans-serif;

margin: 0px;

}

#header

{

margin-right: auto;

margin-left: auto;

padding: 0px;

width: 776px;

background: #EEE;

height: 60px;

text-align: left;

}

#contain

{

margin-left: auto;

margin-right: auto;

width: 776px;

}

#mainbg

{

float: left;

padding: 0px;

width: 776px;

background: #60A179;

}

#right

{

float: right;

margin: 2px 0px 2px 0px;

padding: 0px;

background: #ccd2de;

min-height:300px;

_height:300px;

text-align: left;

}

#left

{

float: right;

margin: 2px 2px 0px 0px;

padding: 0px;

background: #F2F3F7;

width: 574px;

min-height:600px;

_height:600px;

text-align: left;

}

#footer

{

clear: both;

margin-right: auto;

margin-left: auto;

padding: 0px;

width: 776px;

background: #EEE;

height: 60px;

}

.text

{

margin: 0px;

padding: 20px;

}

</style>

</head>

<body>

<div id="header">

header with height of 60px

</div>

<div id="contain">

<div id="mainbg">

<div id="right">

<div class="text">

<p>

put your tree here</p>

</div>

</div>

<div id="left">

<div class="text">

the width of this div is dependent on the right div

left<br />

left<br />

left<br />

left<br />

</div>

</div>

</div>

</div>

<div id="footer">

footer

</div>

</body>

</html>

另外，修改之前的原始代码是我收藏的，好像网上copy很多，也不知道哪里才是原始出处了，尽管做了扩充和修改，但还是应该注明一下，如是您是原作者，请联系我blodfox777@hotmal.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航