HTML中元素响应式高度设置-阿里云开发者社区

开发者社区> 游客rqcha2psffulq> 正文

HTML中元素响应式高度设置

简介: 使用百分比高度时的问题
+关注继续查看

我们知道百分比高度和宽度的计算都是基于父元素高度的。我们溯源到最顶的父元素——html,它的宽度是基于视口宽度的,但是它的高度却是基于内容的,这也就是为什么想通过百分比高度来使高度也响应式改变往往不可行的原因。

方法一:使用padding
主要原理是padding的计算是基于父元素宽度的,我们以保持空div的height=width为例,可以像这样写:

div {

   width: 60%;
   height: 0%;
    padding-top: 60%;
    }

当然如果用这种方式,你还得必须考虑内容所占的高度,所以一般不推荐这样写。

方法二:使用js
只要原理是在onresize事件中,通过clientWidth属性获取元素的可视宽度,并将其赋值给元素的height。有以下几种写法:

在body中:
<body class=" container" οnresize="new function() {

var el=document.getElementById('div');
el.style.height=el.clientWidth+'px';

}">

注意: 1. clientWidth是没有单位的,需要加上px;2. 虽然大多数标签都有onresize事件,但是只有写在body的onresize中才有效。

使用window.onresize

    window.onresize = function () {

        var el = document.getElementById('div');
        el.style.height = el.clientWidth + 'px';
    }

或者是jq的$(window).resize等等。

使用js最为灵活,推荐。

方法三:使用vh和vw
1vh就是视口高度的1%,1vw就是视口宽度的1%,使用这两个单位可以让元素宽高跟随视口大小变化,vh和vw是css3最有用的特性之一。最推荐使用这个方法。

方法四:使用定位
使用Fixed定位或Absolute定位。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
20款免费响应式的 HTML5 网站模板下载
  今天这篇文章给大家带来的是20款免费响应式的 HTML5 网站模板,大家可以借助这些优秀的网站模板创建自己的优秀网站。响应式(Responsive Design)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。
1047 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3975 0
Ideal Forms – 帮助你建立响应式 HTML5 表单
  Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架。它刚刚发布 V3 版本,更小,更快,更具可扩展性。它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持,自定义复选框、单选框和文件输入,无缝集成 jQuery UI 的日期选择器,支持第三方扩展和本地化。
823 0
Jquery 获取和设置元素属性值
Jquery 获取和设置元素属性值 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1044 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
87 0
1
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载