CODEWITHSUNDEEP
htmlcss
shrimpdrake
shrimpdrake

Reputation: 1576

Extensive div child when parent grows/shrinks

I have this HTML code:

<div id="parent">
  <div id="child1">
  </div>
  <div id="child2">
  </div>
</div>

What I want to do is have child2 take 200px and be on the bottom of parent, and have child1 grow/shrink as a parent grows/shrinks (zoom in/out of the page by the user for example)

example:

If parent's height is 1000px, then I want child1's height to be 800px & child2's height to be 200px.

If parent's height is 2000px, then I want child1's height to be 1800px & child2's height to be 200px

How do I do that?

Upvotes: 1

Views: 58

Answers (4)

user3683675
user3683675

Reputation: 125

1.

To do this is very simple. If you make the child2 200px then set the child1 to 100% in height minus the 200px, child1 will take up all the space apart from the 200px that child2 is taking.

alert($("#child1").height());
#parent {
  height: 1000px;
  background-color: green;
}

#child1 {
  height: calc(100% - 200px);
  background-color: blue;
}

#child2 {
  height: 200px;
  background-color: red;
}
<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
</div>

2.

You could also do it using javascript

You take the height of the parent and then -200. Set child 1 to be the resulting height.

var height = $("#parent").height() -200;
$("#child1").height(height);

https://jsfiddle.net/g9xj0mjx/

if you then wanted to get rid of the 1000px parent height and make it a percentage so it changes when the user changes screen size (like you mentioned). You could put it inside a resize event

$( window ).resize(function() {
  var height = $("#parent").height() -200;
  $("#child1").height(height);
});

Upvotes: 1

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11086

This trick works using margin and padding on first child according to the second child height:

#parent {
  height: 1000px;
  background-color: green;
}

#child1 {
  height: 100%;
  background-color: blue;
  margin-bottom: -200px;
  padding-bottom: 200px;
}

#child2 {
  height: 200px;
  background-color: red;
}
<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
</div>

Upvotes: 2

DaniP
DaniP

Reputation: 38252

Solution1

You can do this with absolute position and padding like this:

html, body {height:100%;margin:0}

#parent {
  height:100%;
  position:relative;
}
#child1 {
  height:100%;
  background:yellow;
  padding-bottom:200px;
  box-sizing:border-box;
}
#child2 {
  height:200px;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background:black;
}
<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
</div>

Solution2

You can also use calc(), check the support

html, body {height:100%;margin:0}

#parent {
  height:100%;
}
#child1 {
  height:calc(100% - 200px);
  background:yellow;
}
#child2 {
  height:200px;
  background:black;
}
<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
</div>

Upvotes: 0

Marc Dix
Marc Dix

Reputation: 1969

You can use flexbox to get this done. But beware: Only supported in modern browsers, see caniuse.

#parent {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  height: 1000px;
  background-color: gray;
}

#child1 {
  flex-grow: 1;
  min-width: 100%;
  background-color: orange;
}

#child2 {
  align-self: flex-end;
  min-width: 100%;
  height: 200px;
  background-color: red;
}
<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
</div>

Upvotes: 2

Related Questions