在低於100％的窗口高度滾動后顯示頁腳
[英]Make a footer appear after scrolling below 100% window height
問題描述
標題中很難解釋，所以我將解釋我的要求。 我目前有一個內容包裝器類，其高度為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;
}
1 個解決方案
解決方案1
0 已采納 2017-02-12 15:58:09
您應該設置position: relative; 對於CSS ID Page ：
html, body { font-family: 'Open Sans', sans-serif; background-color: #f3f3f3; color: #666; margin: 0 auto; padding: 0px; width: 100%; height: 100%; } #Page { position: relative; top: 10vh; 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; }
<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>
添加位置后，如何使div具有100％的身高：頁面底部下方的絕對div？
[英]How to make divs have 100% body height after adding position: absolute div below the page bottom?
滾動閾值量后如何循環顯示高度為100％的頁面和URL？
[英]How to cycle 100% height pages and URLs after scrolling a threshold amount?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.