Question

关于div层高的问题 css相关 ：外层div内包含了上下两个层。外层div高度一定，想实现内两个层高度自动调整

外层div内包含了上下两个层。外层div高度一定，想实现内两个层高度自动调整，使高度和始终等于外层高度；
例如：外层高度为100，默认状态内层上高度为20， 内层下高度为80，想实现 单击内上层展开按钮时，高度增加到了60（此时刚好没有滚动条，内容完全展开），则下层高度自动减为40 同时出现滚动条。反之，若单击内下层展开按钮是，则内下层高度自动展开到73（73的高度是刚好没有滚动条的高度，所以是不定的数），而内上层自动变为27 并出现滚动条。
请大家都帮忙，若答案靠谱 会再加50分！

Answer 1

<style>
.scrollyes{ overflow-y:scroll;}
.overhidden{ overflow:hidden;}
#middiv{ width:498px; height:50%; border-top:1px solid green;}
#topdiv{ width:498px; height:50%;}
</style>
<script src="http://www.oh-le.com/js/jquery-1.4.4.min.js"></script>
<div style=" width:500px; height:500px; overflow:hidden;">
<div class="scrollyes" id="topdiv">
内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>
</div>
<div class="scroolyes" id="middiv"> 内容2<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br>内容1<br></div>
</div>
<script>
$("#topdiv").click(
function()
{
$("#middiv").height($("#middiv").parent().height()*0.2);
$("#topdiv").height("auto");
$("#middiv").addClass("scrollyes");
$("#topdiv").removeClass("scrollyes");
}
);
$("#middiv").click(
function()
{
$("#middiv").height("auto");
$("#topdiv").height($("#middiv").parent().height()*0.2);
$("#middiv").removeClass("scrollyes");
$("#topdiv").addClass("scrollyes");
}
);
</script>

Answer 2

o 比较忙呀 还没有装dreamweaver

Answer 3

这个需要 JS 啊， 我的思路是 上层高度 AUTO， 下层高度= 100-上层高度。

Answer 4

<style type="text/css">
<!--
.main{
height:104px;
width:100px;
overflow:hidden;
border:1px solid #000;
}
#id1,#id2{
height:20px;
border:1px solid #000;
}
#id2{
height:80px;
}
-->
</style>
<script type="text/javascript">
function move(id){
var e=document.getElementById(id);
if(id=="id1"){
e.style.height="60px";
e.style.overflow="hidden";
document.getElementById("id2").style.height="40px";
document.getElementById("id2").style.overflow="scroll";
}else{
e.style.height="73px";
e.style.overflow="hidden";
document.getElementById("id1").style.height="27px";
document.getElementById("id1").style.overflow="scroll";
}
}
</script>
<div class="main">
<div id="id1" onclick="move('id1')">id1内容</div>
<div id="id2" onclick="move('id2')">id2内容</div>
</div>

追问

如果id1 和id2 的高度以完全显示内容 刚刚没有滚动条的高度 而不是给定的高度 应该怎么办呢？

追答

那就先设置点击对象的overflow为visible，height为auto，别一个根据拉申后的高度，用外面 的DIV高度减一下

Answer 5

用jquery啊 轻松实现啊..