添加文章标签时，底部的页脚
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>;页脚停留在底部。我尝试了很多方法。但它总是很高。而且我无法使其响应。
您需要
将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>footer {
position: fixed;
bottom: 0px; left: 0px;
}
相关文章：
- 在Shopify中获取博客文章的图片
- 将视口底部滚动到元素底部
- HTML5页面底部棒
- 显示浏览量最高的三篇文章
- 固定位置菜单时滚动，直到它击中一个相对容器的底部
- 将jQuery放在代码的底部
- 在我的网站上显示最近提交的文章/图片
- javascript跨浏览器确定用户是否滚动到页面底部
- javascript移动交叉浏览器确定用户是否滚动到页面底部
- 使用ajax在多个页面上发布一篇文章
- 让自己在文章中成为社交明星's内容高度
- 如何将图表放在顶部和底部
- 我想将链接关联到动态创建的p元素上的相应文章
- 如何摆脱"压缩/块”;PHP页面底部的注释
- 如果同一页面上有多个谷歌地图，单击任何标记都会突出显示最底部的地图标记
- Joomla模式框弹出代码在文章中有效，但在代码中无效
- 引导数据偏移量底部
- 如何防止firefox在打开大型弹出窗口时滚动到页面底部
- 滚动到顶部或底部后的简单效果
- 添加文章标签时，底部的页脚
