HTML/CSS: Creating a DIV between header and footer

Question

I am trying to make my DIV(MainPageImage) fill the entirety of the screen, between the header and the footer.

My HTML:

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Aerial;
  font-size: 18px;
}
#nav {
  background-color: #222;
  Height: 50px;
}
#nav_wrapper {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}
#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  text-align: center;
}
#nav ul li {
  display: inline-block;
}
#nav ul li:hover {
  background-color: #333;
}
#nav ul li a,
visited {
  color: #F00;
  display: block;
  padding: 15px;
  text-decoration: none;
}
#nav ul a:hover {
  color: #C03;
  text-decoration: none;
}
#nav ul li:hover ul {
  display: block;
}
#nav ul ul {
  display: none;
  position: absolute;
  background: #333;
  border: 5px solid #222;
  border-top: 0;
  margin-left: -5px;
}
#nav ul ul li {
  display: block;
}
#nav ul ul li a,
visited {
  color: #F00;
}
#nav ul ul li a:hover {
  color: #099;
}
footer {
  position: fixed;
  bottom: 0;
  background-color: #333;
  border: 5px solid grey;
  color: #F00;
  font-size: 24px;
  text-align: center;
  width: 100%;
  Height: 40px;
  padding-top: 15px;
}

    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">About us</a>
                </li>
                <li><a href="#">Games</a>
                </li>
                <li><a href="#">Social</a>
                    <ul>
                        <li><a href="#">Youtube</a>
                        </li>
                        <li><a href="#">Facebook</a>
                        </li>
                        <li><a href="#">Twitter</a>
                        </li>
                    </ul>
                    <li><a href="#">Contact me</a>
                        <ul>
                            <li><a href="#">Email</a>
                            </li>
                            <li><a href="#">Form</a>
                            </li>

                        </ul>
                    </li>
                    <li><a href="#">Bugs</a>
                    </li>
                </li>

            </ul>
        </div>
    </div>
    
    <div id="MainPageImage">
    <img src="http://i.imgur.com/MHHu946.jpg" style="width:100%; height:auto;" >
    </div>
 <footer>
<p>Copyright @DcoltGaming 2016</p>
</footer>   
</body>
</html>

I have tried to set the height to auto, and the other solutions that I have found don't seem to work.

I hope that someone can solve this.

Thanks DcoltGaming

You seem to be missing a closing tag on your footer and a closing
tag.`

Copyright @DcoltGaming 2016

` — Isabel Inc, Aug 24 '16 at 12:54
I have now edited that, thank you. The image still doesn't fit though :( — , Aug 24 '16 at 13:15
Your accepted answer doesn't seem to answer your question, it just offers a work around. Have a look at my answer in this question (how to make main div take up remaining space) to see how to do a sticky footer properly: http://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083 — Pete, Aug 24 '16 at 14:45

score 0 · Accepted Answer · answered Aug 24 '16 at 13:21

remove the image from html and add it in the css under body and add background-size: cover; like this

background: url("http://i.imgur.com/MHHu946.jpg") no-repeat center center fixed; 
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

here is a snippet

@charset "utf-8";
/* CSS Document */

body{
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    font-family: Aerial;
    font-size : 18px;
     background: url("http://i.imgur.com/MHHu946.jpg") no-repeat center center fixed; 
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#nav{
    background-color: #222;
    Height:50px;
}
#nav_wrapper{
    width: 960px;
    margin: 0 auto;
    text-align: left;
}

#nav ul{
    list-style-type: none;
    padding:0;
    margin: 0;
    position:relative;
    text-align:center;
}

#nav ul li{
    display: inline-block;
}

#nav ul li:hover{
    background-color: #333;
}

#nav ul li a,visited{
    color: #F00;
    display:block;
    padding: 15px;
    text-decoration:none;
}

# nav ul a:hover{
color: #C03;
text-decoration: none;
}

#nav ul li:hover ul{
    display:block;
}
#nav ul ul{
    display: none;
    position: absolute;
    background:#333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
}

#nav ul ul li{
    display: block;
}

#nav ul ul li a,visited{
    color: #F00;
}

#nav ul ul li a:hover{
    color:#099;
}


footer{
    position:fixed; bottom:0;
    background-color:#333;
    border:5px solid grey;
    color:#F00;
    font-size:24px;
    text-align:center;
    width:100%;
    Height:40px;
    padding-top: 15px;
}

<body>
    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">About us</a>
                </li>
                <li><a href="#">Games</a>
                </li>
                <li><a href="#">Social</a>
                    <ul>
                        <li><a href="#">Youtube</a>
                        </li>
                        <li><a href="#">Facebook</a>
                        </li>
                        <li><a href="#">Twitter</a>
                        </li>
                    </ul>
                    <li><a href="#">Contact me</a>
                        <ul>
                            <li><a href="#">Email</a>
                            </li>
                            <li><a href="#">Form</a>
                            </li>

                        </ul>
                    </li>
                    <li><a href="#">Bugs</a>
                    </li>
                </li>

            </ul>
        </div>
    </div>

    <div id="MainPageImage">
    </div>

</body>

<footer> 
<p>Copyright @DcoltGaming 2016</p>
</footer>

HTML/CSS: Creating a DIV between header and footer

1 Answers1