div等元素设置宽高百分比都是基于包含他的块级对象的百分比高度,所以必须先设置包含它的块级对象高度与宽度,但是光设置body是不起作用的,必须同时设置html和body。
 
要使用百分比设置div宽高的话,要养成一个好习惯,先对页面的html和body元素进行百分比的宽高设置。
 
设置方法如下:
 
html,body{
    height:100%;
}
 
设置完毕之后,再对div元素标签设置百分比宽度和高度便会其作用。

cssdiv设置高宽百分比不起作用的问题的更多相关文章

  1. 在html中做表格以及给表格设置高宽字体居中和表格线的粗细

    今天学习了如何用HTML在网页上做表格,对于我这种横列部分的属实有点麻烦,不过在看着表格合并单过格的时候我把整个表格看做代码就容易多了. 对于今天的作业让我学习了更多的代码,对于代码的应用希望更加熟练 ...

  2. textarea 在不同浏览器高宽不一致的兼容性问题

    在html,很多同学喜欢使用rows.cols,来设置textarea的高宽,却发现,在火狐跟其他浏览器,好像高宽却不一致! 因为这是火狐的一个bug, https://bugzilla.mozill ...

  3. 元素绝对定位以后设置了高宽,a标签不能点击的原因总结

    元素绝对定位以后设置了高宽,a标签不能点击的原因: 1.元素内并无内容 2.背景是透明的,无任何背景图或者颜色 解决方法: 1.如果不是绝对定位元素的,可以用相对定位 2.给元素加透明的背景图 3.I ...

  4. 关于html中的设置body宽高的理解

    有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效 ...

  5. input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...

  6. 设置imageView正方形高宽

    private void initWidth() { int screenWidth = ((MyApplication)getApplication()).screenWidth; if(0 == ...

  7. Python设置浏览器宽高

    # 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...

  8. 关于Google圆角高光高宽自适应按钮及其拓展

    关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...

  9. canvas设置长宽

    Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:方法一:1 <canvas width="500" height="500&qu ...

随机推荐

  1. 深浅拷贝_python

    一.浅拷贝 拷贝第一层的东西,如其他列表修改他们共同的第二层(或更深),他管不了,只能跟着变. 用处:很少用,用不同账号关联共享: import copyhusband= ['chen','123', ...

  2. Nginx可以做什么

    Nginx能做什么 ——反向代理 ——负载均衡 ——HTTP服务器(动静分离) ——正向代理 反向代理 反向代理应该是Nginx做的最多的一件事了,什么是反向代理呢,以下是百度百科的说法:反向代理(R ...

  3. redis持久化优缺点

  4. php商城数据库的设计 之无限分类

    商品分类,使用无限分类 即: -------如何创建数据表 pid---父级分类id,如果是顶级分类则为0 path---1,用户分类的排序 . 排序示例: 实现逻辑:获取type表的所有分类,ord ...

  5. kuangbin专题 专题九 连通图 Critical Links UVA - 796

    题目链接:https://vjudge.net/problem/UVA-796 题目:裸的求桥,按第一个元素升序输出即可. #include <iostream> #include < ...

  6. AcWing 870. 约数个数

    #include <iostream> #include <algorithm> #include <unordered_map> #include <vec ...

  7. Homebrew安装和Mac使用

    软件安装 1.Homebrew安装   ruby环境: curl -sSL https://get.rvm.io | bash -s stable   官网方式: /usr/bin/ruby -e & ...

  8. Windows引用opencv静态库

    参考博客:https://www.cnblogs.com/sysuzyq/p/6183568.html

  9. Spring Cloud netflix feign【服务间通信】

    一.简介 1,进程间通讯的本质是交换消息 2,服务间通信的两种方式 (1)RESTFul风格 (2)RPC风格 (3)两种风格的比较 3.基于RESTFul风格服务调用模型 4.基于Spring Cl ...

  10. 搭建离线下载aria2 树莓派下搭建,以及图形化界面AriaNG

    请参考链接 https://www.htcp.net/3652.html https://www.zrj96.com/post-296.html Aria2自动更新BT Tracker服务器列表的方法 ...