CODEWITHSUNDEEP
htmlcss
andriys
andriys

Reputation: 2222

Make absolutely positioned div the height of the parent container

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.

Upvotes: 3

Views: 80

Answers (3)

IGRACH
IGRACH

Reputation: 3635

Well the problem is with position absolute on everything, it's messing the layout, you should really use floats or if you don't care for older browsers, flexbox. This is deep down and dirty js/jquery solution xD: 

jQuery(document).ready(function($) {
  var height = $('.left').css('height');
  $('.right').css('height', height);
});

Upvotes: 0

Brandon Gano
Brandon Gano

Reputation: 6710

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).

Upvotes: 2

spooky
spooky

Reputation: 1648

http://jsbin.com/cacopejabe/1/

Make div sizes match... The yellow div is container thus you need to make other two divs same size... I took out 2000px height on left... You can choose to put 2000px height on black (your red).

Upvotes: 0

Related Questions