如何使用css基於另一個div動態更改div的高度？

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的高度是自動的，所以它不會幫助。這裏是我的小提琴http://jsfiddle.net/prashusuri/E4Zgj/1/該怎麼做？

感謝

來源

2013-01-10 Prashanth Suriyanarayanan

這很複雜，只使用CSS。有各種各樣的方法，你可以查看其中的一些[here]（http://css-tricks.com/fluid-width-equal-height-columns/）。如果你可以使用javascript（或理想的jQuery），那麼更容易 – scumah

@scumah檢查我的答案。 –

所以你想要等高柱？ – cimmanon

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

容器必須有顯示：表
內部容器盒要：顯示：表細胞
不要把浮動。

來源

2013-10-07 09:52:25 cosacu

通過指定的位置，我們可以做到這一點，

.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-10 12:30:28

儘量保持代碼的一致性：您已將上述'color'描述爲'grey'，然後您使用符號來表示顏色。 – user2567857

雖然我的工作。 @cosacu提供的答案是更好的解決方案。 –

我不相信你可以用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-10 12:39:59 WrongASP

不，我們可以用CSS來做到這一點。只是看看我的答案。 –

@Prashanth - 雖然它可以在固定高度或CSS3上進行可能的粗略支持（顯示：表格，彈性框），但並不是當高度是動態的，而且您使用的是浮點數（並且在所有情況下，您可能都需要一些數量的JS支持，使所有相關瀏覽器都可以動態和/或支持）。 [這就是爲什麼人造色譜柱已經存在近十年了。]（http://www.alistapart.com/articles/fauxcolumns/） – Shauna

@Shauna粗略支持？ IE8 +支持'display：table'，以及過去5年內發佈的所有其他瀏覽器版本。 – cimmanon

得到高度相等列，沒有醜陋的副作用，絕對定位一起走最簡單的方法，就是使用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-10 13:30:12 cimmanon

<!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-22 11:10:18

在這段代碼左側面板的高度將被調整爲動態右側面板的高度...

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

你可以在這裏嘗試這種 http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/

來源

2015-01-12 15:24:15

靈活答案

.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-13 23:02:56

如何使用css基於另一個div動態更改div的高度？

回答

相關問題