<body>
<header>头部</header>
<main>中间内容</main>
<footer>底部信息</footer>
</body>
css代码:
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
min-height:100%;
margin:0;
padding:0;
position:relative;
}
header{
background: #000;
text-align: center;
height:50px;
line-height: 50px;
color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
padding-bottom:100px;
background:#ccc;
text-align: center;
}
footer{
position:absolute;
color:#fff;
bottom:0;
width:100%;
height:100px;
line-height:100px;
text-align:center;
background-color: #000;
}
优点:footer一直存在于底部。
缺点:中间区域main如果内容不够,不能撑满页面的中间区域。
HTML代码:
<body>
<div class="container">
<header>头部</header>
<main>中间内容</main>
</div>
<footer>底部信息</footer>
</body>
CSS代码:
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.container{
min-height:100%;
}
header{
background: #000;
text-align: center;
height:50px;
line-height: 50px;
color:#fff;
}
main{
padding-bottom:100px;
background:#ccc;
text-align: center;
}
footer{
color:#fff;
height:100px;
line-height:100px;
margin-top:-100px;
text-align:center;
background-color: #000;
}
此方法把footer之前的元素放在一个容器里面,形成了container和footer并列的结构:
首先,设置.container的高度至少充满整个屏幕;
其次,设置main(.container最后一个子元素)的padding-bottom值大于等于footer的height值;
最后,设置footer的height值和margin-top负值。
展示效果跟第一种是一样的,缺点跟第一种也是一样的。
HTML代码:
<header>头部</header>
<main>中间内容</main>
<footer>底部信息</footer>
CSS代码:
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
min-height:100%;
margin:0;
padding:0;
position:relative;
}
header{
background: #000;
text-align: center;
height:50px;
line-height: 50px;
color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
background:#ccc;
text-align: center;
}
footer{
color:#fff;
width:100%;
height:100px;
line-height:100px;
text-align:center;
background-color: #000;
}
/* 动态为footer添加类fixed-bottom */
.fixed-bottom {
position: fixed;
bottom: 0;
width:100%;
}
JS(jquery)代码:
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight,//网页正文全文高度
winHeight = window.innerHeight;//可视窗口高度,不包括浏览器顶部工具栏
if(!(contentHeight > winHeight)){
//当网页正文高度小于可视窗口高度时,为footer添加类fixed-bottom
$("footer").addClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
CSS代码:
html, body, #sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;}
#footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}
HTML代码:
<div id="sticker">
<div id="stickerCon"></div>
</div>
<div id="footer">footer</div>
这篇文章主要为大家详细介绍js禁止页面回退的方法(使浏览器后退按钮失效),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
html重定向就是通过各种的方法将各种网络请求重新定个方向转到其它位置。 在网站建设中,时常会遇到需要网页重定向的情况:像网站调整,如改变网页目录结构,网页被移到一个新地址
如果上一页是静态页面,可以用 history.go(-1)方法;页面采用了vue,页面每次加载都会去请求数据,用history.go(-1)方法返回上一页,上一页的页面因为重新请求数据,页面不会定位到上次浏览的位置;
不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件. index.html做为项目的首页, 主要用来定义页面框架, 加载必需的css和script.这里使用element-ui的导航菜单组件搭建了一个页面框架.
VisibilityChange 事件;用于用户是否离开当前页面;页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden ;监听 visibility change 事件;页面变为不可见时触发
一个应用程序通常由多个页面组成,而统一管理页面之间跳转的机制通常被称为路由管理或导航管理,在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的
因为自己的项目是基于vue-cli3进行开发,所以这里只讨论这种情况下的解决办法 ,在进行多页面开发的时候,项目刚开始阶段,因为文件较少,所以代码编译速度还行,但是随着项目逐渐增大
假设parent为P页面,P页面有两个子页面,分别为B页面和C页面;B页面和C页面分别内嵌一个iframe,分别为:D页面和E页面,现在通过B页面的内嵌页面D的方法refreshEpage(eUrl)来加载内嵌页面E的内容.
路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理
这里是本小白使用时遇到的问题及个人使用的方法可能并不完美。监测浏览器滚动条滚动事件及滚动距离,一般给window绑定监测事件就能获得window.pageYOffset滚动距离。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!