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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With