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

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

父元素可以设置高度为具体的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. 操刀 requirejs，自己动手写一个

    前沿 写在文章的最前面 这篇文章讲的是,我怎么去写一个 requirejs . 去 github 上fork一下,顺便star~ requirejs,众所周知,是一个非常出名的js模块化工具,可以让你 ...

  2. Git查看、删除、重命名远程分支和tag【转】

    转自:http://zengrong.net/post/1746.htm 本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也 ...

  3. 使用tdcss.js轻松制作自己的style guide

    http://jakobloekke.github.io/tdcss.js/ 在前端开发中,如果能够有一个style guide对于设计来说就显得专业稳定,一致性.在上述链接中,有一个tdcss.js ...

  4. R语言多重共现性的检测

    1.kappa值 2. library(car)vif(lm.sol) 得到各个系数的方差膨胀因子,当0<VIF<10的时候,不存在多重共线性,当10<=VIF<100,存在较 ...

  5. iOS富文本（二）初识Text Kit

    概述 Text Kit 是建立在Core Text上的文本布局系统,虽然没有Core Text那么强大的文本处理功能,但是对于大多数常见的文本布局用Text Kit能够很简单的实现,而不是用Core ...

  6. Tyvj 1085 派对

    这道题和HDU 1016的素数环那道题很相似. 虽然1A了,但写代码的过程中还是丢三落四的. 贴完代码闪人,嘿嘿 //#define LOCAL #include <iostream> # ...

  7. (转) error: linker command failed with exit code 1 (use -v to see invocation)

    转自:http://blog.csdn.net/tiantian1980/article/details/9175777   像这样的一大堆,总体说编译链接时错误 /Users/zhangtianji ...

  8. Spring读取配置文件的几种方式

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileReader; imp ...

  9. Spark源码阅读(1): Stage划分

    Spark中job由action动作生成,那么stage是如何划分的呢?一般的解答是根据宽窄依赖划分.那么我们深入源码看看吧 一个action 例如count,会在多次runJob中传递,最终会到一个 ...

  10. Ensemble Learning 之 Adaboost

    Boosting Boosting 是一种提升方法,将一系列弱学习器组合成为强学习器.基于样本权重的 Boosting 的工作流程是这样的,给定初始训练集构建一个基学习器,根据基学习器对训练样本的分布 ...