Div disappears removing height constraint

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"><a href="../test2/">Home</a></li>
        <li><a href="#">Link11</a></li>
        <li><a href="#">Link22</a></li>
        <li><a href="#">Link33</a></li>
        <li><a href="#">Link44</a></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"><a href="#">Home</a></li>
              <li><a href="#">Link11</a></li>
              <li><a href="#">Link22</a></li>
              <li><a href="#">Link33</a></li>
              <li><a href="#">Link44</a></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