javascript - 网站底部怎么样才能不随分辨率的增大变换位置
PHP中文网
PHP中文网 2017-04-10 15:51:54
[JavaScript讨论组]

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(10)
巴扎黑

不就是footer 沉底么,我一直用的

//页面布局
html
    body
        <p class="page-bg"></p>
        <footer></footer>
    body
html
//不用响应式的话就这样
html,body{
    height:100%;
}
.page-bg{
       min-height: 100%;
       height: auto !important;
       padding-bottom: 80px; //都是80,自己定义footer高度
    }
footer{
    height:80px; //都是80
    margin-top:-80px; //都是80
}
//用响应式,那就每个breakpoint下给高度重新设置一下,平板以下基本就不用设置高度了,自动就好,主要看设计
PHPz

用js获取body高度,然后设置foot的位置 这样可以适应不同分辨率

怪我咯

搜索 sticky footer

PHPz

宽度位置么?你可以写百分比的位置啊

巴扎黑

把底部弄成position:fixed啊

怪我咯

如果是高度的话可以用js获取屏幕高度再做位置计算,或者底部弄成绝对靠底部。

大家讲道理

http://jsbin.com/fefive/1/edit?html,css,js,output

PHP中文网

分辨率增大影像位置是指分辨不同造成的元素显示大小不同么

阿神
<style>
.po{ position:absolute; left:200px; top:300px; width:500px; height:300px; background:#ccc;}
</style>
<p class="po"></p>

绝对定位?position:absolute;

巴扎黑

fixed定位在viewport底部或者absolute定位在祖先定位元素底部

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号