CSS设置DOM宽高的一些小tips

做前端开发总会有一些小技巧需要用到,虽然简单,但是也很容易忘记。所以从现在开始就在这记录下一些感觉比较好玩的小tips。

高度等于宽度

  1. 用js自然很简单了
1
$("#ss").attr("height",$("#ss").attr("width"));
  1. 利用padding撑开
    padding是依靠宽度来定大小的,百分比完全依赖于宽度
1
2
3
4
5
#container{
width: 100%;
height: 0;
padding-bottom: 100%;
}

高度等于屏高

  1. 设置body和html为100%后,里面的元素就可以用百分比控制了
1
2
3
4
5
6
7
8
body,html{
height:100%;
}
#container{
width: 100%;
height: 100%;
/*padding-bottom: 100%;*/
}
  1. js设置
1
2
3
4
//改变div的高度
$("#container").height($(window).height());
//改变div的宽度
$("#container").width($(window).width());

持续更新。。。

文章目录
  1. 1. 高度等于宽度
  2. 2. 高度等于屏高
,