I'm attempting to get my DIV element (MainPageImage) to cover the entire screen area, situated between the header and the footer.
Here's my HTML code:
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've experimented with setting the height to auto, but I haven't had any luck with other solutions I've come across.
If anyone can offer a solution to this issue, I would greatly appreciate it.
Thank you, DcoltGaming