添加文章标签时，将页脚放在底部
[英]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>
I can't stick footer to bottom. 
我无法将页脚踩到底。 I need that every time I will add <article> block; 我需要每次添加<article>块； footer stays at bottom. 页脚停留在底部。 I tried a lot of methods. 我尝试了很多方法。 But it always goes high. 但是它总是很高。 And I can't make it responsive. 而且我无法做出回应。
2 个解决方案
解决方案1
0 2016-01-18 13:10:11
You need to add position:fixed to your footer. 您需要添加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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将页脚粘贴到底部（显示时） - Stick footer to bottom (when shown)
将页脚停留在页面底部 - Stick footer to bottom of page
将页脚放在页面底部 - Stick the footer to the bottom of the page
页面底部的页脚 - stick footer at the bottom of the page
页脚贴到底部 - Footer stick to bottom
jQuery将页脚固定在页面底部 - jQuery to stick the footer to the bottom of the page
将页脚放到底部-没有jQuery - Stick a footer to bottom - without jQuery
如何仅在向上滚动时将页脚粘贴到窗口底部，否则将导致页脚不显示 - How to stick a footer to the bottom of the window ONLY when scrolling up would cause the footer to not be displayed
打印：如何将每页上的页脚粘贴到底部？ - Print: How to stick footer on every page to the bottom?
页脚以自适应布局固定在底部（引导程序） - Footer stick to bottom with adaptative layout (Bootstrap)
相关标签