1

私はcssコードを持っています.floatを使用して左 の列 a と右の 列 bを展開しています 。

右側の列 bにコンテンツを配置するときに、左側の列 a を動的に拡張したいと思います。

しかし、これは私のブラウザIEでは起こっていません。http://jsfiddle.net/hadinetcat/E8jd3/3/で動作し ますが、ブラウザ IE 9,8,7,6 では動作しませんが、IE 10 では正常に動作します..

CSSコード

.container {
 border: 1px solid #000000;
 overflow: hidden;
 width: 100%;
height:100%;
position:relative;
}

.left {
width: 45%;
float: left;
background:none repeat scroll 0 0 lightblue;  
height:100%;
position:absolute;
}

.right {
width: 45%;
float: right;

}

htmlコード

<div class = "container">
<div class="left">
column a
column a<br />
column a<br />
column a<br />
column a<br />
column a<br />
column a<br />
</div>


<div class="right">
column b<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />dynamic row<br />dynamic row<br />dynamic row<br />dynamic row<br />dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
columnb <br />
columnb <br />
columnb <br />
columnb <br />
columnb <br />
columnb <br />
columnb <br />
columnb <br />


</div>
</div>

<div style="clear: both;"></div>
4

1 に答える 1

0

こんにちは、JSFiddle のコードを更新しました (注: jquery も含めました)。その JavaScript を含める必要があります。

IE6 でもテスト済みです。したがって、他のブラウザでも動作します。

check it here : http://jsfiddle.net/btCQn/1/

<style>
.container {
  border: 1px solid #000000;
  overflow: hidden;
  width: 100%;
    position:relative;

}

.left {
  width: 45%;
  float: left;
  background:none repeat scroll 0 0 lightblue;
  position:absolute;
}

.right {
  width: 45%;
  float: right;

}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
$(".left").css("height",$(".right").height());
});
</script>

その働き

于 2013-09-25T22:26:24.973 に答える