[cssメモ]幅100%高さ100%で画面いっぱいに表示するコンテンツの下に固定高さのフッターを付けるには

初めまして！
私は今年から独学でホームページの作成を始めた者です。いくつかサイトを作っていく内にどんどん知識は増えていくものの、壁にもぶつかりぶつかり・・・。そんな中、KUMA TYPE様のブログを発見させて頂き、本当にためになり、とてもありがたく感じております。なにせ、独学なもので、傍に先生がいてくれればすぐに解決できるものも、調べるだけでも時間がかかってしまい、一歩進むのでさえも一苦労なのです。
もし、ご迷惑でなければ、KUMA TYPE様に具体的に質問させて頂き、教えて頂くことは出来きませんでしょうか？
今わからない事は、スクロール無しのトップページを作成して、一見出来ているようなのですが、画面を縮小して見た時に形が完全に崩れてしまうことです。形を全く変えることなく、画面を縮小した時にも全てが単に縮小して見えるだけで、フル画面にした時と同じように見えるようにするためにはどようにすれば良いのでしょうか？
下記にcssを表記させて頂きます。
突然このようなコメントをしてしまい、大変失礼致しました。ご返信頂ければ幸いです。どうぞ宜しくお願い致します。

body {
margin: 0;
padding: 0;
text-align:center;
background-image:url(bg_1.jpg);
background-repeat:repeat;
background-position:top center;
padding-bottom:53px;
overflow:hidden;
}

#main{
}

.menu {　/*メニュー　親枠*/
margin-left:45%;
margin-top:23%;
padding:0px;
border:0px solid yellow;
　width: 500px;
height:160px;
position:absolute;
}

.menu1 a { /*メニュー　home*/
position:relative;
border:0px solid #000000;
margin:85px 0px 0px 0px;
width: 70px; /* 画像1枚分の横幅 */
height: 20px; /* 画像1枚分の高さ */
background-image: url('contents_1.gif');
backgroun-repeat:no-repeat;
}
.menu1 a:hover {
background-image: url('contents_1.gif');
backgroun-repeat:no-repeat;
}

.menu2 a { /*メニュー　blog*/
position:relative;
margin:-110px 0px 0px 160px;
border:0px solid #000000;
width: 57px; /* 画像1枚分の横幅 */
height: 21px; /* 画像1枚分の高さ */
background-image: url('contents_2.gif');
}
.menu2 a:hover {
background-image: url('contents_2_2.gif');
backgroun-repeat:no-repeat;
}

.menu3 a { /*メニュー　about*/
position:relative;
margin:-15px 0px 0px 260px;
border:0px solid #000000;
width: 78px; /* 画像1枚分の横幅 */
height: 20px; /* 画像1枚分の高さ */
background-image: url('contents_3.jpg');
backgroun-repeat:no-repeat;
}
.menu3 a:hover {
background-image: url('contents_3_3.jpg');
backgroun-repeat:no-repeat;
}

.menu4 a { /*メニュー　news*/
position:relative;
margin:-110px 0px 0px 390px;
border:0px solid #000000;
width:60px; /* 画像1枚分の横幅 */
height: 20px; /* 画像1枚分の高さ */
background-image: url('contents_4.gif');
backgroun-repeat:no-repeat;
}
.menu4 a:hover {
background-image: url('contents_4_4.gif');
backgroun-repeat:no-repeat;
}

.menu5 a { /*メニュー　member*/
position:relative;
margin:-20px 0px 0px 500px;
border:0px solid #000000;
width:102px; /* 画像1枚分の横幅 */
height: 20px; /* 画像1枚分の高さ */
background-image: url('contents_5.jpg');
backgroun-repeat:no-repeat;
}
.menu5 a:hover {
background-image: url('contents_5_1.jpg');
backgroun-repeat:no-repeat;
}

#footer{
height:53px;
background-image:url(footer.gif);
font-family:Arial,Helvetica,sans-serif;
font-size:70%;
font-style:normal;
color:#ffffff;
text-align: right;
0border:1px solid #888888;
}

＞形を全く変えることなく、画面を縮小した時にも全てが単に縮小して見えるだけで、フル画面にした時と同じように見えるようにするためにはどようにすれば良いのでしょうか？

私もんまり詳しい方ではないので、おしえて系のサイトでスタイルシートだけではなくHTMLも一緒に貼り付けて質問したほうがよい回答が得られるとおもいます。

私もちょっと上のスタイルシートだけではどのようなものを求めてられているのか判断ができませんでしたが分かる範囲で気付いた点などを書いておきます。

スタイルシートの文法で誤っているところがいくつかあります。
0border
backgroun
など
あと途中に全角スペース『　』が紛れていてエラーになっているところがあります。

スタイルシートの文法などが間違っていないかを確認するにはFirefoxをつかうと便利です。ツール＞エラーコンソールでエラーコンソールを開いておいてページを表示するとそのページ内のエラーを表示してくれます。

とりあえずおかしなところを直して表示を確認してみてください。

ブラウザの画面を縮小したときに合わせてページを変形するには変形させる全てのブロック要素を幅や高さを%指定にしてあげる必要があるかと思います。

くまっち様、ご回答頂きましてありがとうございました。なんとか探り探りやってはみたのですが、やはりブラウザの画面を縮小した時にはおかしな表示になってしまいます。もう少し色々調べて勉強してみます！ありがとうございました！！