Div disappears removing height constraint - html

Question

I need to build a small website and I'm having problems with the page resizing.
I want that the png image that I put as header is resizable with the whole page (zooming in or out).
I use this css
div#container {
overflow: hidden;
min-width:900px;
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('header.png') no-repeat center center;
height:20%;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
and here the html part
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
Here a link with the test code: https://jsfiddle.net/809ofmvr/1/ I don't know how to add image in the test. Let's say that in the upper part there is the header image and in the bottom part the footer.
I use for the header, a div header and inside the upper_nav div with some links. I think the problem is inside the header div but I don't know where. I also tried to replace position:relative; with display:block; but gives me the same problem.
What can I do to allow a complete resize of the entire page when changes the monitor resolution, zoom, using a smartphone or whatever? With the content it resizes in the correct way.

Answer 1

You can use 20vw to force the header to have a height:
html {
margin:0;
padding:0;
background-color:#ffffff;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color:#000;
text-align:justify;
background-image: url('http://placehold.it/800x200');
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
div#container {
overflow: hidden;
min-width:900px;
/*max-width:2000px;*/
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('http://placehold.it/800x200') no-repeat center center;
background-size: cover;
height:20vw;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
div#navigation_left {
padding:5px 5px;
float: left;
width:22%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#content {
overflow:auto;
margin-left:25%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#footer {
clear:both;
background: url('footer.png') no-repeat center center;
height:105px;
position:relative;
}
div#footer_content {
position: relative;
bottom:-50%;
text-align:center;
z-index:9999;
background-color:#fff;
}
P {
font-size: 17px;
color:#000;
font-family:Tahoma;
}
a {
text-decoration: none;
color:#0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,h3,h4,h5,h6,h7,h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_left{
font-size: 11px;
list-style: none;
}
ul#menu_left li {
display: block;
width: 150px;
height: 30px;
margin: 2px;
}
ul#menu_left li a {
color:#000;
display: block;
line-height: 30px;
text-decoration: none;
text-align: left;
}
ul#menu_left li.active, ul#menu_left li:hover {
background-color: #c9c9c9;
}
ul#menu_header {
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul#menu_header li {
background-color: #737373;
display: block;
width: 150px;
height: 30px;
margin: 2px;
float: left; /* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
display: block;
line-height: 30px;
text-decoration: none;
width: 150px;
height: 30px;
text-align: center;
}
ul#menu_header li.active, ul#menu_header li:hover {
background-color: #b1b1b1;
}
<div id="container">
<div id="header">
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">
<a hfre="#">links</a>
</ul>
</div>
<div id="content"><p>text</p></div>
<div id="footer"><div id="footer_content">text</div></div>
</div>
Also, I added background-size: cover; to make sure the background image always fills the container