css - 调整布局以适应整个屏幕时遇到问题

Question

我是初学者，希望得到一些帮助，看看我在哪里犯了错误。我已经调整了我的 css 以尝试使页脚下降到页面底部，无论查看页面的屏幕尺寸如何。我尝试将 body 高度调整为 100%，但这没有用。我正在努力使底部页脚位于折叠下方，因此只有向下滚动时才能看到它，而当您第一次进入该页面时我们看不到它。

如果有任何关于如何解决我的问题的建议，我将不胜感激。

这里有一些图片给你一个例子和CSS

手机

垂直平板电脑

水平平板电脑

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

你提到:

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.

我不认为单独的 css 能够做到这一点，我有一个 quick jsfiddle对你来说可能有所帮助。

windowHeight = $(window).height();
footerHeight = $(".footer").height();

$(".wrap").css({
    "height": windowHeight + footerHeight
});