Instead of putting a set margin, anyway to have container fit to bottom of window?

[namalinowski]

I don't know how to explain this well, but on my website I made (http://www.r3l4t3.com) I have a menu bar. You will only see it when you first get on the page if you have a 1920x1080 monitor. Is there anyway, I can set it so all monitor resolutions will be able to see it right when you go to the page, without have to scroll down?


Here is the HTML for the nav:

<div id="nav">
	<ul>
    	<li><a href="index.html"><img src="images/home.png" border="0" /></a></li>
        <li><a href="http://www.r3l4t3.bandcamp.com"><img src="images/music.png" border="0" /></a></li>
    	<li><a href="about.html"><img src="images/about.png" border="0" /></a></li>
    	<li><a href="contact.html"><img src="images/contact.png" border="0" /></a></li>
        <li class="liscroll"><a rel="nofollow" href="#footer" title="Scroll Down"><img src="images/scroll.gif" border="0" /></a></li>
    </ul>
    
</div>

And the CSS for that:

body {
	background-image:url(images/bg.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-attachment:fixed;
	background-color: #E8E8E8;
	font-family: 'Open Sans', sans-serif;
}

#container {
	width: 980px;
	margin: 0 auto;
	margin-top: 880px;
	background-color: #E8E8E8;
}

#nav {
	width: 980px;
	padding: 0;
	margin-bottom: 10px;
	margin-left: 10px;
}

#nav ul {
	list-style-type:none;
	padding: 0;
	margin: 0;
}

#nav ul li {
	display:inline;
}

Want to make it turn from this: (Notice there is no navigation on the bottom of the screen)


To This: (Notice the navigation at the bottom, but have to scroll down if you don't have a 1920x1080 monitor)



Sorry I don't know how to explain this easily.


Thank You!

[Frankie]

Hey there,

What you want is totally possible, and is what we call a sticky footer, even though one does not normally put the navmenu in that. I wrote a tutorial about it that is linked from my signature page.

However, you should make the button icons white or another contrasting color, because they will overlap with the image on normal and small screens.