div等元素位置自适应屏幕大小

珊妹今天给大家分享的是前端最低级且实用的技术,大家不论是开发还是面试都会经常碰见的问题的解决办法:

#.我们开发时候,如果创建个div,可能会想让它适应任何屏幕大小,因为我们访问时候的电脑或手机尺寸大小不一,本来在我们开发的机器上美观的很,有时候我们的网站就会变得错综复杂,一盘散沙,下面就来提供几种方法:

1.获取屏幕窗口高度-其它元素高度:

var h = $(window).height()-$("#header").outerHeight(true); 

$("#div").css("height",h);

2.单位百分制:

一般我们开发PC端网站,单位都是用px像素,如果想实现自适应,我们还会用百分比来代替单位,这样也会实现自适应布局;

3.弹性布局:

父元素设置:display:fixed;

子元素设置:  flex:1; //这个数值根据自己情况设置,如果只有一个子元素,则会占用父元素的全部空间,多个子元素设置同一个数                         值,会平分父元素的控件

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值