Why is div outside of parent div when i use height:100%

Question

I have problems placing a div within another div which has a defined height of lets say 400px.

When i set the inner div to 100% then its overlapping the outer div and goes over the outer one. Why isnt 100% height sizing the inner div to the outer divs height?

body {
  min-width:300px;
}

.header {
  background-color:pink;
  width:100%;
  height:400px;
}

.menu {
  background-color: red;
}

.header-container {
  color:white;
  background-color:gray;
  height:100%;
  max-width:400px;
  margin:auto;
}

.headline {
  padding-right:36px;
  padding-left:36px;
  padding-top:54px;
  padding-bottom:54px;
}

.clearfix {
  clear:both;
}

<div class="header">
  <div class="menu">
  menu
  </div>
  <div class="header-container clearfix">
    <div class="headline">
      <span>das ist mein blog</span>
      <span>this is the underline</span>
    </div>
  </div>
</div>
<div class="blog">
y
</div>
<div class="footer">
x
</div>

https://jsfiddle.net/g9ec4nw8/

I'd imagine because 100% means exactly that... **all** the height. If you want the **remaining** height...that's different and there are many questions on that here. — Paulie_D, Sep 13 '17 at 10:34
But i want to have those padding to not have the inner div stick on the menu. — STORM, Sep 13 '17 at 10:34
Duplicate? - https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 — Paulie_D, Sep 13 '17 at 10:35

score 9 · Accepted Answer · answered Sep 13 '17 at 10:35

9

Because the the padding on the .header-container is causing an overflow.

Adding box-sizing: border-box; to your .header-container, will fix the box-sizing issue.

But not only that, you haven't taken into account the 18px of height by your .menu.

In full, by changing your .header-container to the following code:

.header-container {
        color:white;
        background-color:gray;
        height:calc(100% - 18px);
        max-width:400px;
        box-sizing: border-box;
        margin:auto;
        top:0;
        bottom:0;
        padding-right:36px;
        padding-left:36px;
        padding-top:54px;
        padding-bottom:54px;
 }

Will fix the issue.

Fiddle Here.

answered Sep 13 '17 at 10:35

G.Hunt

1,364
10
20

That would mean if i would have multiple container with lets say height of 100px + 10px + 50px within inner div, then i have to subtract 160px from the height of the inner div. Curious, but seem to work now. Is this a good practice? – STORM Sep 13 '17 at 10:38
For fixed-height layouts, this is only the real solution, as by specifying a fixed height, you're telling the browser to never change size. You need to develop for that scenario. The `calc()` is a CSS3 function that is actually really useful! – G.Hunt Sep 13 '17 at 10:39
1

Flexbox can do that regardless of the height of the menu. That's what the linked Q&A explains. – Paulie_D Sep 13 '17 at 10:40
@Paulie: Thanks. I will mark this one as answer, cause it directly answers my questions, but will also study today the "flexbox". Thanks a lot! – STORM Sep 13 '17 at 10:41

Why is div outside of parent div when i use height:100%

1 Answers1