Html 如何使用css根据另一个div动态更改div的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14257593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change the height of a div dynamically based on another div using css?
提问by JSAddict
here is my code
这是我的代码
HTML:
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:
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;
}
i want to increase the height of div3 dynamically.
我想动态增加 div3 的高度。
for example if the height of div1 is 500px then the height of div3 should be 500px. i know i can use inherit, but the thing is height of div1 is auto so it wont help. here is my fiddle http://jsfiddle.net/prashusuri/E4Zgj/1/how to do this?
例如，如果 div1 的高度是 500px，那么 div3 的高度应该是 500px。我知道我可以使用继承，但问题是 div1 的高度是自动的，所以它无济于事。这是我的小提琴http://jsfiddle.net/prashusuri/E4Zgj/1/如何做到这一点？
thanks
谢谢
采纳答案by cosacu
#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;
}
- The container must have display:table
- The boxes inside container must be: display:table-cell
- Don't put floats.
- 容器必须有 display:table
- 容器内的框必须是：display:table-cell
- 不要放浮标。
回答by JSAddict
By specifying the positions we can achieve this,
通过指定位置，我们可以实现这一点，
.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;
}
but it is not possible to achieve this using float.
但是使用浮动是不可能实现的。
回答by cimmanon
The simplest way to get equal height columns, without the ugly side effects that come along with absolute positioning, is to use the display: tableproperties:
获得等高列的最简单方法是使用以下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;
}
Now, if your goal is to have .div2so that it is only as tall as it needs to be to contain its content while .div3is at least as tall as .div2but still able to expand if its content makes it taller than .div2, then you need to use flexbox. Flexbox support isn't quite there yet (IE10, Opera, Chrome. Firefox follows an old spec, but is following the current spec soon).
现在，如果您的目标是.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;
}
回答by German Gonzalez
Flex answer
灵活回答
.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;
}
Check the fiddle at http://jsfiddle.net/germangonzo/E4Zgj/575/
回答by WrongASP
I don't believe you can accomplish that with css. Originally javascript was designed for this. Try this:
我不相信你可以用 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>
and javascript function:
和 javascript 函数：
function adjustHeight() {
document.getElementById('div3').style.height = document.defaultView.getComputedStyle(document.getElementById('div1'), "").getPropertyValue("height");
}
call the javascript after the div1 (or whole page) is loaded.
在加载 div1（或整个页面）后调用 javascript。
You can also replace document.getElementById('div3').style.heightwith code manipulating class div3 since my code only add / change style attribute of an element.
您还可以使用操作类 div3 的代码替换document.getElementById('div3').style.height，因为我的代码只添加/更改元素的样式属性。
Hope this helps.
希望这可以帮助。
回答by M C Jain
<!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>
回答by Harsha
In this piece of code the height of left panel will gets adjusted to the height of right panel dynamically...
在这段代码中，左侧面板的高度将动态调整为右侧面板的高度...
function resizeDiv() {
var rh=$('.pright').height()+'px'.toString();
$('.pleft').css('height',rh);
}
You can try this here http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/
你可以在这里试试这个 http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/
