头部尾部始终处于两端(适用于pc端和移动端)

此代码展示的效果阐述:(随着屏幕宽高度的变化而变化)

当页面内容小于屏幕高度时,头尾分别处在屏幕顶部和屏幕底部;

当页面出现滚动条时,头尾分别处于屏幕顶部和内容底部;

<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;       这一步很关键
}
.container{
min-height: 100%;         这一步也很关键
position: relative;
}
.box{
width:100%;
height: 500px;
background: blue;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height:100px;
background: #64A131;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div id="footer">
footer
</div>
</div>
</body>

转载于:https://www.cnblogs.com/xinyouhunran/p/9376223.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在移动端头部尾部的展示取消,并全屏显示,你可以使用CSS中的媒体查询和定位属性来实现。以下是实现的步骤: 1. 在头部尾部的HTML代码中添加一个类或ID,例如: ```html <header class="header">...</header> <footer class="footer">...</footer> ``` 2. 在CSS中添加媒体查询,以检测屏幕的宽度是否小于某个值(例如768px)。如果小于这个值,就将头部尾部的高度设置为0,并将它们的定位设置为绝对定位,使它们不再占据页面空间。例如: ```css @media (max-width: 768px) { .header, .footer { height: 0; position: absolute; } } ``` 3. 在CSS中添加一个全屏样式,以使页面填满整个屏幕。例如: ```css .fullscreen { width: 100vw; height: 100vh; overflow: hidden; } ``` 4. 在JavaScript中添加一个事件监听器,以便在屏幕尺寸变化时添加或删除fullscreen类。例如: ```javascript const header = document.querySelector('.header'); const footer = document.querySelector('.footer'); const body = document.querySelector('body'); window.addEventListener('resize', () => { if (window.innerWidth < 768) { header.classList.remove('fullscreen'); footer.classList.remove('fullscreen'); body.classList.add('fullscreen'); } else { header.classList.add('fullscreen'); footer.classList.add('fullscreen'); body.classList.remove('fullscreen'); } }); ``` 这样,当屏幕宽度小于768px时,头部尾部会被隐藏,并且页面会全屏显示。当屏幕宽度大于768px时,头部尾部会重新出现,页面也会恢复正常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值