Трудно объяснить в заголовке, поэтому я объясню, что я прошу. В настоящее время у меня есть класс оболочки содержимого, высота которого составляет 100%. Я бы хотел, чтобы это дошло до нижней части окна, а затем, когда пользователь прокрутит нижний колонтитул, появится. Однако в настоящий момент я считаю, что оболочка div выталкивает нижний колонтитул с глаз долой, но я не могу прокрутить вниз. Вот изображение того, что я могу видеть до сих пор https://gyazo.com/117100c3408956a85aa957bdce2b5b13Сделать нижний колонтитул после прокрутки ниже 100% высоты окна
В конце концов обертка 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. –