<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
left 和 right 面板都是向左浮动的，当没有滚动条存在时它们可以正常工作，但是如果 left 的高度面板改变了，滚动条会显示，然后右边的面板会降到底部。
参见示例 here :
首先，right div 将显示在left 旁边，当您单击该按钮时，right 将移至底部。
如何解决？
更新
事实上我无法设置左右div的绝对大小，因为我希望它们根据内容自动调整大小。
完整代码:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
}
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:auto;
}
.left{
background-color:black;
position:relative;
float:left;
}
.right{
background-color:blue;
position:relative;
float:left;
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("open").onclick=function(){
document.getElementById("left").style.height="900px";
//document.getElementById("right").style.width="300px";
//document.getElementById("right").style.height="500px";
}
}
</script>
</head>
<body>
<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
</body>
</html>
最佳答案
这有效...
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:scroll;
}
关于html - float 元素在有滚动条的情况下到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14039266/