解决HTML中设置宽或高为百分比时无效的问题

news/2024/7/24 10:47:51 标签: width百分比, height百分比

在开发web项目时,为了适应浏览器分辨率,所以不免会使用到如下述代码

<div style="width:100%">
	....
</div>

然而有时候会发现这种方法是无效的。
一般情况下,造成这种问题的原因是由于百分比是相对于父类元素而言的,换句话说必须得有一个确定宽高的父类元素,其下的子类才能用百分比。我们可以用js把body标签设置成和浏览器窗口一样大小,代码如下(JQuery):

$(function () {
    $("body").height($(window).height());
    $("body").width($(window).width());
    $(window).resize(function () {
        $("body").height($(window).height());
        $("body").width($(window).width());
    })
})


http://www.niftyadmin.cn/n/897178.html

相关文章

获取table当前点击的行数

<html> <head> <script src"jquery-1.11.2.min.js"></script> <script>function clearLine(element){$(element).parent().parent().remove();//使用jQuery方法} </script> </head> <body> <table> <tr>…

python constant_函数_Python装饰器入门_Python编程学习

Python允许你&#xff0c;作为程序员&#xff0c;使用函数完成一些很酷的事情。在Python编程学习中&#xff0c;函数是一等对象(first-class object)&#xff0c;这就意味着你可以像使用字符串&#xff0c;整数&#xff0c;或者任何其他对象一样使用函数。例如&#xff0c;你可…

使用layui实现冻结窗口功能

layui官方中提供了fixed字段&#xff0c;来实现冻结窗口功能&#xff0c;但这是通过table.render方法实现&#xff0c;若没有数据的话&#xff0c;不会直接实现这个功能。通过参考layui的代码&#xff0c;自己写了个实现冻结窗口的功能。其实也比较简单&#xff0c;就是把原Tab…

JavaWeb接入微信公众号

不啰嗦&#xff0c;直接上代码&#xff1a; //这里注意要确保微信公众号开发配置时的网址可以访问到这个方法 RequestMapping(value "/setwechat")public void setWechat(HttpServletRequest request,HttpServletResponse response) throws Exception{response.set…

babel import语法 js_深入原理:Babel原理与Babel插件实践

前言前端开发从「刀耕火种」过渡到「现代化」自动构建工程体系的过程中&#xff0c;Babel扮演了一个举足轻重的地位&#xff0c;使得我们可以用与时俱进的代码语法且最大程度上不受浏览器版本的约束&#xff0c;本文对如何使用Babel不再赘述&#xff0c;着重介绍Babel的原理和如…

layui日期选择框实现选择当前周的日期范围

直接上代码&#xff1a; layui.use([laydate], function() {var laydate layui.laydate;var monday getMonday(new Date());var mm layui.util.toDateString(monday,yyyy-MM-dd)var sunday GetDateStr(monday,6);laydate.render({elem: #daterange//绑定的html元素id,type…

查找功能_Win10或将迎来类似macOS的查找鼠标光标功能

IT之家11月1日消息 在 macOS 上&#xff0c;你可以通过简单地摇动鼠标来放大光标&#xff0c;使其更容易看到。Windows 10 也允许用户通过按下 Ctrl 键来寻找桌面上的光标&#xff0c;你可以从鼠标的可访问性设置中启用和禁用该功能。根据科技爱好者的消息&#xff0c;微软目前…

javaWeb后端下载磁盘文件

RequestMapping(value "/download")public void queryByDictType(HttpServletRequest request, HttpServletResponse response) {String pathStr request.getParameter("path")//文件路径response.addHeader("Content-type", "appllicati…