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;
}

但是使用浮点数是不可能实现的。

于 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

在这段代码中，左侧面板的高度将动态调整为右侧面板的高度......

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 回答
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 回答