【发布时间】：2017-02-12 23:58:09
【问题描述】：
很难在标题中解释，所以我会解释我的要求。我目前有一个高度为 100% 的内容包装类。我希望它到达窗口的底部，然后当用户向下滚动时，页脚会出现。然而，目前我相信包装器 div 将页脚推到视线之外，但我无法向下滚动。这是我目前看到的图片https://gyazo.com/117100c3408956a85aa957bdce2b5b13
最终包装器 div 将是透明的，但现在它是黑色的以帮助查看。这个想法是，如果我在这一点上向下滚动，就会出现一个页脚。
任何帮助将不胜感激，谢谢。
HTML：
<body id="chesters">
<img src="assets/home-bg.jpg" id="home-bg" alt="">
<header>
<nav>
<ul>
<li><a href="menu.html">MENU</a></li>
<li><a href="burritos.html">BURRITOS</a></li>
<li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</nav>
</header>
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet feugiat orci. Vestibulum volutpat iaculis erat non maximus. Nam dictum faucibus aliquam. Maecenas mollis suscipit purus sit amet mattis. Suspendisse vitae turpis lectus. Fusce at efficitur nunc, id congue libero. Donec efficitur lacus non orci ornare luctus.
Aenean id nulla eget diam finibus vehicula sed et dolor. Mauris et purus justo. Pellentesque vitae eros nec ante sodales eleifend ut convallis nulla. Cras diam massa, ornare eget venenatis ut, posuere ut tortor. Duis quis tristique quam. Fusce consequat enim nisl. Curabitur ornare eros a risus tincidunt, eget scelerisque lacus varius. Quisque sed dapibus justo. Etiam eleifend consectetur neque a rutrum. In ac eleifend elit. Vestibulum sagittis est vitae lacus ornare, eget accumsan nibh tincidunt. Vestibulum est turpis, suscipit in risus ac, imperdiet auctor urna. Sed non sem quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div> <!-- Page -->
</body>
CSS：
html, body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0 auto;
padding: 0px;
width: 100%;
height: 100%;
}
#Page {
position: fixed;
padding-top: 100px;
z-index: 3;
width: 100%;
height: 100%;
}
#home-bg {
position: fixed;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8;
}
header {
background-color: #1c1c1b;
font-family: 'Yanone Kaffeesatz';
font-size: 250%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
align-content: center;
height: 100px;
transition: all 0.8s ease;
}
.scroll {
height: 80px;
font-size: 180%;
}
.header-image-scroll {
height: 80px;
}
nav {
}
nav ul {
text-align: center;
display: table;
width: 50%;
margin: 0 auto;
padding-left: 0;
}
nav li {
display: table-cell;
vertical-align: middle;
padding: 0 30px 0 30px;
margin: 0 auto;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
text-decoration: underline #f3f3f3;
}
#content {
background-color: black;
}
.wrapper {
width: 50%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: deeppink;
}
【问题讨论】：
-
提供jsfiddle。
标签： javascript jquery html css