Div in div height 100% but with a header line?

Question

So, first of all, I want to say, that I know that similar questions existing, but no of these helped me out though.

I just want to create a frame, within a headline with 50px and another frame in this "container" with height 100%.

But this is not working.

I already tried to create multiple container as divs etc. http://prntscr.com/ohshyn this is the current result.

... and this is the current code I used.

body {
  background-color: black;
}

.container {
  width: 500px;
  height: 500px;
  background-color: red;
  padding: 10px;
}

.top {
  width: 100%;
  height: 50px;
  background-color: green;
}

.bottom {
  width: 100%;
  height: 100%;
  background-color: blue;
}

<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

I want to look like this: http://prntscr.com/ohsip9

Robin · Accepted Answer · 2019-07-20T19:34:45.187

1

Your .bottom class height souldn't be 100%, it should be 100% - 50px(.top class height). Add .bottom class height with calc function like this, it works.

height: calc(100% - 50px);

edited Jul 20 '19 at 19:34

answered Jul 20 '19 at 19:32

Robin

4,902
2
27
43

Thanks, helped me a lot! :) I didn't even know that something like calc was existing. – vincent Jul 20 '19 at 19:33
One suggestion: its better to handle your layout with `percentage(%)` or `view port height(vh) & view port width(vw)` instead of using `pixel(px) or rem`. so in future, your layout will fit for all devices(large, small, medium e.t.c). – Robin Jul 20 '19 at 19:38

score -1 · Answer 2 · answered Jul 20 '19 at 19:33

-1

Make both height values a percentage.

answered Jul 20 '19 at 19:33

Duane Rogers

1
1

Div in div height 100% but with a header line?

2 Answers2