Schwer im Titel zu erklären, damit ich erklären werde, was ich anfordere. Ich habe derzeit eine Inhalts Wrapper-Klasse, die eine Höhe von 100% hat. Ich möchte, dass dies den unteren Rand des Fensters erreicht und wenn ein Benutzer nach unten scrollt, erscheint die Fußzeile. Im Moment glaube ich, dass das Wrapper Div die Fußzeile außer Sichtweite bringt, aber ich kann nicht runterscrollen. Hier ist ein Bild von dem, was ich bis jetzt sehen kann https://gyazo.com/117100c3408956a85aa957bdce2b5b13Machen Sie eine Fußzeile nach dem Scrollen unter 100% Fensterhöhe
Schließlich wird der Wrapper div transparent sein, aber es ist schwarz für jetzt zu sehen. Die Idee ist, dass, wenn ich an dieser Stelle nach unten scrollen würde, eine Fußzeile erscheinen würde.
Jede Hilfe würde sehr geschätzt werden, danke.
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;
}
Stellen Sie jsfiddle zur Verfügung. –