添加文章標簽時，將頁腳放在底部
[英]Stick footer at bottom when adding article tag
問題描述
html{ background: url(../images/mb-bg-fb-03.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } body{ height: 100%; } header{ background-image: url("../images/naviBack.jpg"); opacity: 0.8; } #NavPos{ text-align: center; } #page{ margin: 0 auto; position: relative; } .nm{ color:#C3D9FF; } .content{ margin: 2% 10%; background-color:#F9F7ED; opacity: 0.8; } .pic{ border: dotted; width: 260px; display: inline-block; vertical-align: middle; padding: 0; margin: 0; } img{ max-width: 100%; } .descr { display: inline-block; vertical-align: middle; border: dotted; } .desctext{ overflow: hidden; max-width: 21ch; } a{ text-decoration: none; } footer{ padding-left: 10%; width: 100%; height: 100px; background:#36393D; opacity: 0.9; text-align: center; } ul{ } li{ display: inline-block; margin-left: auto; margin-right: auto; } #fb{ color: #3b5998; } #ok{ color:#ed812b; } #insta{ color: #ded1c1; } #tw{ color: #1dcaff } #copyr{ color: #FF1A00; } .fblock{ display: block; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/Backmain.css"> <link rel="stylesheet" type="text/css" href="css/NaviStyle.css"> <link rel="stylesheet" type="text/css" href="css/w3.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/ContentStyle.css"> <link rel="stylesheet" type="text/css" href="css/FooterStyle.css"> <title>Poxanakum.am</title> </head> <body> <div id="page"> <header> <nav class="w3-topnav w3-padding-32" id="NavPos"> <a href="#" id="3"><i class="fa fa-home fa-5x nm" ></i></a> <div class="w3-dropdown-hover"> <a href="#"><i class="fa fa-newspaper-o fa-5x nm"></i></a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> </div> </div> <a href="#"><i class="fa fa-user-plus fa-5x nm"></i></a> <a href="#"><i class="fa fa-question fa-5x nm"></i></a> </nav> </header> <div class="conten"> <article class="w3-border w3-container content"> <span class="pic"> <img src="include/inclItem.jpg" alt="ps"> </span> <span class="descr"> <a title="description" href="#"><p class="desctext">Playstation 4</p></a> </span> </article> <article class="w3-border w3-container content"> <span class="pic"> <img src="include/inclItem.jpg" alt="ps"> </span> <span class="descr"> <a title="description" href="#"><p class="desctext">Playstation 4</p></a> </span> </article> </div> <footer class="w3-container fot" id="footer"> <ul> <li> <a href="#" class="fblock"><i class="fa fa-facebook-square fa-5x" id="fb"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-odnoklassniki-square fa-5x" id="ok"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-twitter-square fa-5x" id="tw"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-instagram fa-5x" id="insta"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-copyright fa-5x" id="copyr"></i></a> </li> </ul> </footer> </div> </body> </html>
我無法將頁腳踩到底。 我需要每次添加<article>塊； 頁腳停留在底部。 我嘗試了很多方法。 但是它總是很高。 而且我無法做出回應。
2 個解決方案
解決方案1
0 2016-01-18 13:10:11
您需要添加position:fixed到頁腳。
html{ background: url(../images/mb-bg-fb-03.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } body{ height: 100%; } header{ background-image: url("../images/naviBack.jpg"); opacity: 0.8; } #NavPos{ text-align: center; } #page{ margin: 0 auto; position: relative; } .nm{ color:#C3D9FF; } .content{ margin: 2% 10%; background-color:#F9F7ED; opacity: 0.8; } .pic{ border: dotted; width: 260px; display: inline-block; vertical-align: middle; padding: 0; margin: 0; } img{ max-width: 100%; } .descr { display: inline-block; vertical-align: middle; border: dotted; } .desctext{ overflow: hidden; max-width: 21ch; } a{ text-decoration: none; } footer{ padding-left: 10%; width: 100%; height: 100px; background:#36393D; opacity: 0.9; text-align: center; } ul{ } li{ display: inline-block; margin-left: auto; margin-right: auto; } #fb{ color: #3b5998; } #ok{ color:#ed812b; } #insta{ color: #ded1c1; } #tw{ color: #1dcaff } #copyr{ color: #FF1A00; } .fblock{ display: block; } #footer{ position:fixed; width:100%; display:block; bottom:0; left 0; right : 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/Backmain.css"> <link rel="stylesheet" type="text/css" href="css/NaviStyle.css"> <link rel="stylesheet" type="text/css" href="css/w3.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/ContentStyle.css"> <link rel="stylesheet" type="text/css" href="css/FooterStyle.css"> <title>Poxanakum.am</title> </head> <body> <div id="page"> <header> <nav class="w3-topnav w3-padding-32" id="NavPos"> <a href="#" id="3"><i class="fa fa-home fa-5x nm" ></i></a> <div class="w3-dropdown-hover"> <a href="#"><i class="fa fa-newspaper-o fa-5x nm"></i></a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> <a href="#">Link 3</a> </div> </div> <a href="#"><i class="fa fa-user-plus fa-5x nm"></i></a> <a href="#"><i class="fa fa-question fa-5x nm"></i></a> </nav> </header> <div class="conten"> <article class="w3-border w3-container content"> <span class="pic"> <img src="include/inclItem.jpg" alt="ps"> </span> <span class="descr"> <a title="description" href="#"><p class="desctext">Playstation 4</p></a> </span> </article> <article class="w3-border w3-container content"> <span class="pic"> <img src="include/inclItem.jpg" alt="ps"> </span> <span class="descr"> <a title="description" href="#"><p class="desctext">Playstation 4</p></a> </span> </article> </div> <footer class="w3-container fot" id="footer"> <ul> <li> <a href="#" class="fblock"><i class="fa fa-facebook-square fa-5x" id="fb"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-odnoklassniki-square fa-5x" id="ok"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-twitter-square fa-5x" id="tw"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-instagram fa-5x" id="insta"></i></a> </li> <li> <a href="#" class="fblock"><i class="fa fa-copyright fa-5x" id="copyr"></i></a> </li> </ul> </footer> </div> </body> </html>
解決方案2
0 2016-01-18 13:24:19
footer {
position: fixed;
bottom: 0px; left: 0px;
}
如何僅在向上滾動時將頁腳粘貼到窗口底部，否則將導致頁腳不顯示
[英]How to stick a footer to the bottom of the window ONLY when scrolling up would cause the footer to not be displayed
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.