HTML Page fit while zooming - html

Question

I want to try to make a html page fit my screen while zooming.
I can not specify this more or I do not know how to explain so:
Open this site http://www.airsoftgent.be/ and try zooming out, then you will see what I mean.
Help me please!!
Thank You

Answer 1

Situation:
I see what you want to do. Some months ago I tried to make the same thing, with succes.
You must understand I can not give you the whole code just some basic lines. Then try to implement them yourself and if there is a problem just ask.
Solution:
I'm going to try to explain based on my own site.
What does my site contain:
First off all I have a normal HTML page with a header, main and footer. The header is not important for now.
Let's start by adding a wrap, place it round the main and footer. Like this:
<div id="wrap">
<div id="main">
<p>Some Text Here</p>
</div>
<div id="footer">Copyright</div>
</div>
Now for the CSS file:
We start bij adding the body and html tag:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
The body and html tag must contain these items! It will not work if it doesn't!
Then we add the wrap(in CSS), make shure it contains following code, you can mess with the padding, margin and width to make it look nicer but just for now only this:
#wrap{
height: auto;
min-height: 100%;
height: 100%;
position: relative;
}
Explenation:
The min-height is to make shure the height is always 100%, even is there is not much text.
The position has to be relative! For all the rest of the tags/classes inside the wrap the position has to be absolute! But I will explain that later on.
For the Height: auto we need an other explenation: since IE does not always recognizes height: 100%, you have to use auto.
Now last but not least: we have to add the main and footer in the CSS file:
#main{
height: 100%;
position: absolute;
bottom: 15px;
}
#footer{
position: absolute;
bottom: 0;
}
Explenation:
In the main you need to set the height to 100%, just to make shure it fills the whole wrap. And as I said set the positon to absolute, this has to be done just to make shure that everything stays at it's place.
Also important the bottom is now 15px, it refers to the height of the footer. I you want a lager footer edit this value as well or you will mess up things.
In the footer the same position absolute. And this time you have to set the bottom to 0px, to make shure it is place at the end of the wrap.
So I hope you understand. This works fine for me and does exactly what you asked.
You will have to use padding and margin to position some things, but that is up to you, enjoy!