有时候设置高度百分比，没有效果。

原因是父元素没有设置高度。

父元素可以设置高度为具体的px。或是100%等百分比。

这样子元素再能根据百分比来设置高度。

  <style type="text/css">

        html,body {

            width:100%;

            height:100%;

            margin:0px;

            padding:0px;

        }

        .center {

            width:80%;

            margin:auto;

        }

        #top {

            height:20%;

            background-color:yellow;

        }

        #module {

            height:60%;

            background-color:gray;

        }

        #bottom {

            height:20%;

            background-color:blue;

        }

    </style>

<body>

    <div id="top" class="center"></div>

    <div id="module"  class="center"></div>

    <div id="bottom"  class="center"></div>

</body>

Div高度百分比的更多相关文章

  1. HTML学习之给div高度设置百分比不生效的问题

    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...

  2. div设置百分比高度 宽度

    给div按百分比设置高度 宽度两种方法: 第一种是给body标签设置他的高度值,xxxpx,div就会根据body的像素值取百分比: 第二种方法就是在div属性中加入 position:absolut ...

  3. HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

    原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...

  4. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  5. 让bootstrap-table支持高度百分比

    更改BootstrapTable.prototype.resetView 方法,以支持高度百分比定义,适应不同高度屏幕 BootstrapTable.prototype.resetView = fun ...

  6. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  7. 如何设置div高度为100%

    div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...

  8. 如何让两个 并列的div高度相等

    哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(i ...

  9. div高度自适应（总结：min-height:100px; height:auto;的用法）

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

随机推荐

  1. android 从服务器上获取APK下载安装

    简单的为新手做个分享.  网上有些资料,不过都是很零散,或是很乱的,有的人说看不懂. 一直有新手说 做到服务器更新APK时没有思路,这里做个简单的分享,希望有不同思路的可以讨论.  下面做个很简单的读 ...

  2. 最短JS判断是否为IE6(IE的写法) (转)

    常用的 JavaScript 检测浏览器为 IE 是哪个版本的代码,包括是否是最人极端厌恶的 ie6 识别与检测. 代码如下: var isIE = !!window.ActiveXObject; v ...

  3. Linux suse x86_64 环境上部署Hadoop启动失败原因分析

    一.问题症状: 在安装hadoop的时候报类似如下的错误: # A fatal error has beendetected by the Java Runtime Environment: # #  ...

  4. HDU4675【GCD of scequence】【组合数学、费马小定理、取模】

    看题解一开始还有地方不理解,果然是我的组合数学思维比较差 然后理解了之后自己敲了一个果断TLE.... 我以后果然还得多练啊 好巧妙的思路啊 知识1: 对于除法取模还需要用到费马小定理: a ^ (p ...

  5. hibernate CascadeType属性说明

    CascadeType.PERSIST //只有A类新增时,会级联B对象新增.若B对象在数据库存(跟新)在则抛异常(让B变为持久态) CascadeType.MERGE //指A类新增或者变化,会级联 ...

  6. How do I install uudecode?

    uudecode is in the package sharutils Install it with the package manager or start a terminal and typ ...

  7. 《OD学hadoop》第二周0703

    hdfs可视化界面: http://beifeng-hadoop-01:50070/dfshealth.html#tab-overview yarn可视化界面: http://beifeng-hado ...

  8. remove duplicates in Postgres(sql去重)

    A frequent question in IRC is how to delete rows that are duplicates over a set of columns, keeping ...

  9. git subtree有效管理公共第三方lib

    如果你的项目中有很多第三方的lib,你希望使用它,并且也希望可能对该lib做修改并且贡献到原始的项目中去,或者你的项目希望模块化,分为几个repo单独维护,那么git subtree就是一个选择.gi ...

  10. UVa 10878 Decode the tape

    题目很简单,代码也很短.第一遍做的时候,我居然二乎乎的把input里面的小框框忽略掉了,所以WA了一次. 每一行代表一个二进制的ASCII码,'o'代表1,空格代表0,中间的小黑点忽略. 我直接把一行 ...