0 
<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面板会下到底部。

请参阅此处的示例：

起初，rightdiv 会显示在 旁边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>
4

2 回答 2

0

这有效...

.con{
    float:left;
    position:relative;
    left:100px;;
    top:100px;
    border:2px solid red;
    max-height:80%;
    overflow-y:scroll;
}
于 2012-12-26T10:34:36.017 回答
0

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

于 2012-12-26T10:45:39.837 回答