CSS - Child height relative to viewport if parent has position:fixed

Question

I need to make the child height relative to the viewport. Using HTML:

<div class="parent">My divider
  <div class="child">
      Inside the div
  </div>
</div>

and CSS:

.t1 {
    background:#f00;
    color:#fff;
}

.t2 {
  background:#212121;
  height:100vh;
}

http://jsfiddle.net/hr8sL/7646/

As you can see from the example, There's always this small gap, because it takes into account the overall height of the parent. However, I only need the child to fill "the rest" of the viewport from parent.

How should I proceed? I've tried many other things, but without sufficient result

I'm not quite sure what you're asking. Are you asking how to remove the small gap **between** `t1` and `t2`? Can you not just give `t2` a negative `margin-top`? Or are you asking how to make `t2` take up `100%` of the **remaining** height? That would be done with `calc()`. — Obsidian Age, Mar 01 '18 at 23:04

score 0 · Answer 1 · answered Mar 01 '18 at 23:03

0

I would do it like this.

Using the css calc() function we can calculate the remaining height.

body {
  margin: 0;
  /* This is used to reset any browser-default margins */
}

.t1 {
  background: #f00;
  color: #fff;
  height: 20px;
}

.t2 {
  background: #212121;
  height: calc(100vh - 20px);
}

<div class="t1">
  My divider
</div>
<div class="t2">
  Inside the div
</div>

answered Mar 01 '18 at 23:03

E. Sundin

4,103
21
30

Could you please clarify where `20px` came from? – Kosh Mar 01 '18 at 23:14
@KoshVery I added it. OP did not specify any limitations to a set height for the "divider" and he asked for guidance. – E. Sundin Mar 01 '18 at 23:18

CSS - Child height relative to viewport if parent has position:fixed

1 Answers1