<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
パネルは下に移動します。
ここの例を参照してください:
最初は、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>