CSS布局与定位——height百分比设置无效/背景色不显示

html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”,

使用百分比的好处是元素会按父元素宽高自动调节大小,有更好的自适应性,

但由于<body>元素默认宽度有效,默认高度无效,

因此<div>(定位方式为默认值static)父元素为<body>时width="100%" height="100%",其高度设置是无效的,

如该<div>无内容,仅设置了背景色和边框,则<div>背景颜色和边框也不显示。

PS:当<div>的定位方式为绝对定位或固定定位,即position属性值为absolute或fixed时,

父元素为<body>时width="100%" height="100%",其高宽设置均有效,默认为当前窗口的宽高百分比,

若设置了背景色和边框,则<div>背景颜色和边框均可显示。

absolute定位和fixed定位区别见【 CSS布局与定位——Positioning(定位)四种定位方式要点总结】。

CSS布局与定位——height百分比设置无效/背景色不显示的更多相关文章

  1. Head First HTML与CSS — 布局与定位

    1.流(flow)是浏览器在页面上摆放HTML元素所用的方法. 对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行: 对于内联元素,在水平方向会相互挨着,总体上 ...

  2. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  3. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  4. css 布局之定位 相对/绝对/成比例缩放

    给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 p ...

  5. 测开之路三十八:css布局之定位

    常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置a ...

  6. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  7. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

随机推荐

  1. 学习ios【1】Objective-C 基本语法

    一 了解一下,找参考资料 1.看书学习object-c语法,第一本看的是<objective-c程序设计>. 2.官网:https://developer.apple.com/librar ...

  2. get/post时中文乱码问题的解决办法

    1.文章1 最近遇到一个问题:用get方法传递中文有问题,用post没有问题. 问题简单的描述是这样的: <a href="userGroup.jsp?userGroupName=&l ...

  3. mysql 处理查询请求过程

    需要搞清楚查询为什么会慢,就要搞清楚mysql处理查询请求的过程: 1.客户端发送SQL请求给服务器 2.服务器检查是否可以在查询缓存中命中该SQL   查询缓存对SQL性能的影响. 1.需要对缓存加 ...

  4. vijos1325 桐桐的糖果计划

    Description 桐桐是一个快乐的小朋友,他生活中有许多许多好玩的事,让我们一起来看看吧-- 桐桐很喜欢吃棒棒糖.他家处在一大堆糖果店的附近. 但是,他们家的区域经常出现塞车.塞人等情况,这导致 ...

  5. linux之 awk

    简介awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进 ...

  6. js 正则表达式:密码必须由6-12位数字加字母组成

    ^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$

  7. 交互题(二分)(D. Game with modulo)

    题目链接:http://codeforces.com/contest/1104/problem/D 题目大意:给出一个式子 x%a y%a,会返回结果,如果返回x代表x%a>=y%a.如果返回y ...

  8. dumpbin 查看dll中的导出函数

    C:\Program Files (x86)\Microsoft Visual Studio 14.0>dumpbin -exports E:\20171110\Release\aa.dll h ...

  9. jQuery.when(deferreds)

    有一天当我的上司问到我一个问题,两个或者多个ajax 同时运行,怎么去处理当它成功或者失败以后执行我想要的结果.我的第一反应就是if或者switch判断.其实不然jQuery已经有好的方案帮我们解决了 ...

  10. DatagridView 控件列顺序与设置的不一样

    解决方案如下 : 1. dataGridView1.AutoGenerateColumns = false; 2. 绑定的dataSource 中所有的列都要写进去(列一定是绑定的模型中属性) 先在界 ...