Menu
How to make red div to equal in height a parent yellow div?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="main">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
CSS:
.main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
background-color: yellow;
overflow: auto;
}
.left {
background-color: orange;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 2000px;
}
.right {
background-color: orangered;
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
}
Example here: http://jsbin.com/fafexulube/edit?html,css,output
Update: the height of the left div cannot be changed, it's got 2000px to show it's higher than its parent.
579
If you set position on the parent to something other than static, you can use height:100%; or top:0; bottom:0; on the child.
If you want a sibling to define the height of the parent, you can not set it to position:absolute;.
Take a look at this updated jsbin: http://jsbin.com/qavihuleme/3/edit.
Specifically, add position:relative; to the parent and remove position:absolute; from the sibling (.left).
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
