16

これが私のコードです。

HTML：

<div class="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br /> Div2 ends
  </div>
  <div class="div3">
    Div3
  </div>
</div>

CSS：

.div1 {
  width: 300px;
  height: auto;
  background-color: grey;
  border: 1px solid;
  overflow: auto;
}

.div2 {
  width: 150px;
  height: auto;
  background-color: #F4A460;
  float: left;
}

.div3 {
  width: 150px;
  height: auto;
  background-color: #FFFFE0;
  float: right;
}

div3ダイナミックに高さを上げたい。

たとえば、の高さがでdiv1ある場合、の500px高さはであるdiv3必要があります500px。div1継承を使用することはできますが、の高さは役に立たないのでわかりautoます。

これが私のフィドルですhttp://jsfiddle.net/prashusuri/E4Zgj/1/

これを行う方法？

4

7 に答える 7

9 
#container-of-boxes {
    display: table;
    width: 1158px;
}
#box-1 {
    width: 578px;
}
#box-2 {
    width: 386px;
}
#box-3 {
    width: 194px;
}
#box-1, #box-2, #box-3 {
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;
}
  • コンテナにはdisplay：tableが必要です
  • コンテナ内のボックスは次のようにする必要があります：display：table-cell
  • フロートを入れないでください。
于 2013-10-07T09:52:25.597 に答える
6

これを達成できる位置を指定することにより、

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  position:relative;
  overflow:auto;
}
.div2 {
  width:150px;
  height:auto;
  background-color: #F4A460;  
  float:left;
}
.div3 {
  width:150px;
  height:100%;
  position:absolute;
  right:0px;
  background-color: #FFFFE0;  
  float:right;
}

ただし、floatを使用してこれを実現することはできません。

于 2013-01-10T12:30:28.830 に答える
1

絶対配置に伴う醜い副作用なしに、同じ高さの列を取得する最も簡単な方法は、次のdisplay: tableプロパティを使用することです。

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  display: table;
}

.div2, .div3 {
  display: table-cell;
}
.div2 {
  width:150px;
  height:auto;
  background-color: #F4A460;  

}
.div3 {
  width:150px;
  height:auto;
  background-color: #FFFFE0;  
}

http://jsfiddle.net/E4Zgj/21/

さて、あなたの目標が.div2、コンテンツを含むのに必要なだけの高さでありながら.div3、少なくとも同じ高さで.div2あるが、コンテンツがそれよりも高くなった場合でも拡張できるようにすることである場合は.div2、flexboxを使用する必要があります。Flexboxのサポートはまだ完全にはありません（IE10、Opera、Chrome。Firefoxは古い仕様に従いますが、まもなく現在の仕様に従います）。

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  display: flex;
  align-items: flex-start;
}

.div2 {
  width:150px;
  background-color: #F4A460;
}

.div3 {
  width:150px;
  background-color: #FFFFE0;
  align-self: stretch;
}

http://jsfiddle.net/E4Zgj/22/

于 2013-01-10T13:30:12.737 に答える
1

フレックスアンサー 

.div1 {
   width:300px;
   background-color: grey;  
   border:1px solid;
   overflow:auto;
   display: flex;
}
.div2 {
   width:150px;
   background-color: #F4A460;
 }
.div3 {
    width:150px;
    background-color: #FFFFE0;  
 }

http://jsfiddle.net/germangonzo/E4Zgj/575/でフィドルを確認してください

于 2017-10-13T23:02:56.800 に答える
0

私はあなたがcssでそれを達成できるとは思わない。もともとjavascriptはこのために設計されました。これを試して：

<div class="div1" id="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br />
    Div2 ends
  </div>
  <div class="div3" id="div3">
    Div3
  </div>
</div>

およびjavascript関数：

function adjustHeight() {
    document.getElementById('div3').style.height = document.defaultView.getComputedStyle(document.getElementById('div1'), "").getPropertyValue("height");
}

div1（またはページ全体）がロードされた後にjavascriptを呼び出します。

私のコードは要素のスタイル属性を追加/変更するだけなので、 document.getElementById（'div3'）。style.heightをクラスdiv3を操作するコードに置き換えることもできます。

お役に立てれば。

于 2013-01-10T12:39:59.643 に答える
0 
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here is the Pakka codes for making the height of a division equal to another dynamically - M C Jain, Chartered Accountant -->

<script language="javascript">
function make_equal_heights()
{


if ((document.getElementById('div_A').offsetHeight) > (document.getElementById('div_B').offsetHeight) ) 
{ 
document.getElementById('div_B').style.height = (document.getElementById('div_A').offsetHeight) + "px";
} 
else 
{ 
document.getElementById('div_A').style.height = (document.getElementById('div_B').offsetHeight) + "px"
}


}
</script>

</head>

<body style="margin:50px;"  onload="make_equal_heights()"> 

<div  id="div_A"  style="height:200px; width:150px; margin-top:22px;
                        background-color:lightblue;float:left;">DIVISION A</div><br>

<div  id="div_B"  style="height:150px; width:150px; margin-left:12px;
                        background-color: blue; float:left; ">DIVISION B</div>

</body>
</html>
于 2013-11-22T11:10:18.237 に答える
0

このコードでは、左側のパネルの高さが右側のパネルの高さに動的に調整されます...

function resizeDiv() {
var rh=$('.pright').height()+'px'.toString();
$('.pleft').css('height',rh);
}

ここでこれを試すことができます http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/

于 2015-01-12T15:24:15.683 に答える