Question

<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面板的高度发生变化，滚动条会显示，然后right面板将显示在底部。

见exmaple here：

首先，right div会显示在left旁边，当您点击该按钮时，right将会显示在底部。

如何解决？

更新

实际上我无法设置左右div的绝对大小，因为我希望它们根据内容自动调整大小。

Fullcode：

<!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>

Answer 1

这有效......

.con{
    float:left;
    position:relative;
    left:100px;;
    top:100px;
    border:2px solid red;
    max-height:80%;
    overflow-y:scroll;
}

Answer 2

最好的方法是让左侧和/或右侧面板更“窄”

存在滚动条时浮动元素转到底部

更新

2 个答案: