ここで検索して、すでに多くの可能な解決策を試しましたが、何も機能せず、何が間違っているのかわかりません。お役に立てれば幸いです。私のフッターはコンテンツによって押し下げられることはないので、ビューポートの高さが十分でない場合、フッターはコンテンツに重なるだけです。フッターを常にコンテンツ (ページ) の下部に配置したい。ビューポートではありません。
ここに私のスタイルがあります：
@charset "utf-8";
/* CSS Document */
* { margin:0; padding:0;}
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */}
html, body {
height: 100%;
}
body {
font-family: 'PT Sans', sans-serif;
font-size: 100%;
background-color: #fff;
color: #fff;
}
a img { border: none;}
a { text-decoration: none;}
#wrapper {
width: 100%;
min-height:100%;
height: 100%;
margin: 0 auto;
}
#header-outer {
width: 100%;
margin: 0 auto;
height: 110px;
background: url(../images/headerBG.png) top center no-repeat;
background-color: rgba(39,53,99, 0.9);
}
#header-inner {
width: 984px;
margin: 0 auto;
height: 110px;
}
#content {
width: 984px;
min-height: 100%;
height: 100%;
margin: 0 auto;
background:url(../images/contentBG.png) repeat;
margin-top: 54px;
padding: 0 0 80px 80px;
overflow:hidden;
}
#maincontent {
width: 580px;
height: 100%;
float:left;
margin: 80px 0 0 0;
}
#maincontent .imagecontainer {
width: 164px;
height: auto;
margin: 5px 16px 5px 0;
text-align: left;
float:left;
}
#maincontent .imagecontainer img{
padding: 5px;
width: 154px;
background-color: #fff;
box-shadow: 0 0 5px rgb(216,216,216);
-webkit-box-shadow: 0 0 5px rgb(216,216,216);
-moz-box-shadow: 0 0 5px rgb(216,216,216);
}
.caption {
margin: 0 15px 0 8px;
font-size: 0.85em;
color: #8398A0;
font-style: italic;
}
a:focus{outline:0;}
img.imgLeft {
margin: 8px 18px 16px 0;
float: left;
}
img.imgRight {
margin: 8px 0 16px 16px;
float: right;
}
h1 {
font-family: 'Rosario', sans serif;
font-size: 2.125em;
font-style: italic;
color: #7FBE40;
border-bottom: solid 2px #7FBE40;
padding-bottom: 8px;
margin-bottom: 30px;
}
#maincontent p {
font-size: 0.875em;
color: #556870;
line-height: 160%;
}
#mainside {
width: 270px;
height: 100%;
float: right;
}
#mainside p {
font-size: 1em;
font-style: italic;
color: #8FA8CF;
line-height: 180%;
padding: 74px 60px 40px 18px;
}
.propsearchcontainer {
position: relative;
width: 270px;
height:auto;
top: 0px;
right: 0;
}
#footer-outer {
width: 100%;
height:40px;
background-color: rgba(27,36,67, 0.9);
bottom: 0;
}
#footer-inner{
width: 984px;
height: 40px;
margin: 0 auto;
color: #fff;
}
#facebook {
width: 24px;
height: 24px;
float:left;
clear:both;
}
h3 {
font-family: 'Raleway', sans serif;
font-weight: 700;
font-size: 1em;
color: #8FA8CF;
text-transform: uppercase;
}
/* Clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
a.cboxElement {outline:0;}
そしてここに私のhtml：
<body>
<div id="wrapper">
<div id="header-outer">
<div id="header-inner">
<a href="" title=""><img src="images/mainLogo.png" alt=""></a>
<div id="mainnav">
<ul>
<li><a id="contact-button" title="Contact" href="">Contact</a></li>
<li><a id="gallery-button" title="Gallery" href="">Gallery</a></li>
<li><a id="faq-button" title="FAQ" href="">FAQ</a></li>
<li><a id="news-button" title="News" href="">News</a></li>
<li><a id="properties-button" title="Properties" href="">Properties</a></li>
<li class="menu"><a class="link" id="about-button" title="About Us" href="">About Us</a>
<ul class="dropdown">
<li><a href="" title="">Herrera Real Estate</a></li>
<li><a href="" title="">Our Services</a></li>
<li><a href="" title="">Herrera Interiors</a></li>
</ul>
</li>
<li><a id="home-button" title="Home" href="">Home</a></li>
</ul>
</div><!-- End Mainnav -->
</div><!-- End Header-inner -->
</div><!-- End Header-outer -->
<div id="content">
<div id="maincontent">
<h1>Herrera Real Estate</h1>
<div class="imagecontainer">
<a href="images/placeholder.jpg"><img src="images/placeholder.jpg" alt="" /></a><p class="caption">Caption</p>
</div>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). t is a long established fact that a reader will be
distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
using ‘Content here, content here’, making it look like readable English. </p>
</div><!-- End maincontent -->
<div id="mainside">
<div id="propsearchcontainer">
<a href="" title=""><img src="images/propSearchBtn.png" alt="" /></a>
</div><!-- End propsearchcontainer -->
<p>“Just a quick note to say thanks very much for the information I garnered at the course last week, I must say I came along with the usual reservations that you have about whether
the whole thing might be very ‘Americanised’ and not relevant to our market but it was brilliant.”</p>
</div><!-- End mainside -->
</div><!-- End Content -->
<div id="footer-outer">
<div id="footer-inner">
<div id="facebook"><a href="" id="fb-button" title="">Find us on Facebook</a></div>
<div id="footernav">
<ul>
<li><a href="" title="">ABOUT GRENADA</a></li>
<li><a href="" title="">LINKS</a></li>
</ul>
</div><!-- End Footernav -->
</div><!-- End Footer-inner -->
</div><!-- End Footer-outer -->
</div><!-- End Wrapper -->
</body>
ここで間違っている可能性のある提案はありますか? また、インスペクターを使用すると、html と body の両方が 100% の高さではないことに気付きました。