Having issues adjusting layout to fit the whole screen - css

Question

I'm a beginner and would like to get some help and see where I'm making a mistake. I've adjusted my css to try to make the footer drop to the bottom of the page no matter the screen size that's view the page. I tried adjusting the body height to be at 100%, but that did not work.
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
If there is any advice on how I can solve my issue, it would be much appreciated thanks.
Here are some pictures to give you an example & the CSS
Mobile
Tablet Vertical
Tablet Horizontal
CSS:
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
color: #000000;
width:100%;
height:100%;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000000;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1em;
margin-top: 1.8em;
text-align:left;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 100%;
}
ul, ol {
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
#wrapper {
overflow: hidden;
background-color: #FFFFFF;
}
#bottom-wrapper {
overflow: hidden;
position:relative;
bottom:0;
height: 100px;
padding: 5px 0px 0px 0px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#bottom {
overflow: hidden;
width: 960px;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
}
.abouttext {
width: 625px;
margin: 10px auto;
}
.three {
width: 1000px;
margin: 10px auto;
padding: 10px 140px;
}
.container {
width: 880px;
margin: 10px auto;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
/* Header */
#header-wrapper {
overflow: hidden;
height: 110px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#header {
overflow: hidden;
width: 100%;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
font-weight: bold;
}
/* Banner */
#banner {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
#banner .image-style {
border: 15px solid #F4F4F4;
}
/* Logo */
#logo {
float: left;
width: 400px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 10px 0px 0px 0px;
font-size: 3.0em;
}
#logo p {
margin-top: -10px;
padding: 0px 0px 0px 5px;
font-size: 20px;
color: #FFFFFF;
}
#logo p a {
color: #FFFFFF;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFFFFF;
}
/* Splash */
#splash {
overflow: hidden;
padding: 0px 0px 0px 0px;
border-bottom: 1px dashed #E7E2DC;
letter-spacing: 0px;
text-align: center;
vertical-align:middle;
font-size: 18px;
}
div.home-rt, div.cat{
/*width:310;height:355;*/
text-align:center;/*border:solid 2px #e0e0e0;*/
margin: 0 auto;
vertical-align:top;
display:inline-block;
cursor:pointer;
}
.iPad_1, .iPad_2, .iPad_3, .iPad_4, .iPad_Air, .iPad_Mini, .iPad_MiniRetina
{
margin:10px 10px 10px 10px;
}
.iPhone_2G, .iPhone_3G, .iPhone_3GS, .iPhone_4, .iPhone_4S, .iPhone_5, .iPhone_5C, .iPhone_5S
{
margin:10px 10px 10px 10px;
}
#splash div.home-rt {
/*margin-top:10px;
margin-bottom:10px;*/
width:310;
height:355;
background:#fff;
}
#splash .home-rt {
text-align:center !important;
}
#splash span {
color: #313131;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #B9B9B9;
color: #000000;
}
/* Menu */
#menu {
float: right;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: center;
margin: 0;
padding: 15px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 10px 0px 15px 30px;
text-decoration: none;
text-align: center;
font-size: 20px;
font-weight: 300;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #000000;
}
#menu .current_page_item a {
}
/* Page */
#page {
padding: 30px 0px 0px 0px;
}
/* Content */
#content {
float: left;
width: 620px;
padding: 0px 40px 0px 0px;
background: url(images/img05.jpg) no-repeat right 40px;
}
.post {
overflow: hidden;
}
.post .title {
padding: 0px 0px 10px 0px;
letter-spacing: -3px;
}
.post .title a {
border: none;
color: #7D7764;
}
.post .meta {
margin-bottom: 30px;
padding: 0px;
text-align: left;
font-size: 16px;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 10px 0px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
margin-bottom: 30px;
}
.more {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
margin-right: 10px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
.comments {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width: 320px;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #000000;
}
#sidebar h2 {
padding: 0px 0px 30px 0px;
letter-spacing: -3px;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Three Column Footer Content */
#footer-content {
background: url(images/img04.png) no-repeat center top;
color: #E2B8C6;
}
#footer-bg {
overflow: hidden;
padding: 170px 0px;
}
#footer-content h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
letter-spacing: -2px;
text-shadow: 1px 2px 0px #861F40;
font-size: 16px;
color: #FFFFFF;
}
#column1 {
float: left;
width: 320px;
margin-right: 20px;
}
#column2 {
float: left;
width: 320px;
}
#column3 {
float: right;
width: 320px;
}
/* Footer */
#footer {
height: 100px;
margin: 0 auto;
padding: 10px 0px 0px 0px;
/*background: url(images/img04.png) no-repeat center top;*/
}
#footer p {
margin: 0;
padding-top: 150px;
line-height: normal;
text-align: center;
color: #000000;
}
#footer a {
color: #000000;
}
#marketing {
overflow: hidden;
margin-bottom: 30px;
padding: 20px 0px 10px 0px;
border-top: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
}
#marketing .text1 {
float: left;
margin: 0px;
padding: 0px;
letter-spacing: -2px;
font-size: 14px;
color: #000000;
}
#marketing .text2 {
float: right;
}
#marketing .text2 a {
display: block;
width: 252px;
height: 38px;
padding: 15px 0px 0px 0px;
background: url(images/img07.jpg) no-repeat left top;
letter-spacing: -2px;
text-align: center;
font-size: 12px;
color: #000000;
}
.box1 {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style1 li {
padding: 7px 0px 7px 0px;
border-top: 1px dashed #E7E2DC;
}
.list-style1 .first {
padding-top: 0px;
border-top: none;
}
.list-style2 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style2 li {
padding: 7px 0px 7px 0px;
background: url(images/img06.png) repeat-x left top;
}
.list-style2 a {
color: #E2B8C6;
}
.list-style2 a:hover {
color: #C76485;
}
.list-style2 .first {
padding-top: 0px;
background: none;
}

Answer 1

You mentioned:
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
I don't think css alone is capable of doing this, I got a quick jsfiddle for you that may help.
windowHeight = $(window).height();
footerHeight = $(".footer").height();
$(".wrap").css({
"height": windowHeight + footerHeight
});