Div高度百分比
有时候设置高度百分比，没有效果。
原因是父元素没有设置高度。
父元素可以设置高度为具体的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高度百分比的更多相关文章
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- div设置百分比高度 宽度
给div按百分比设置高度 宽度两种方法: 第一种是给body标签设置他的高度值,xxxpx,div就会根据body的像素值取百分比: 第二种方法就是在div属性中加入 position:absolut ...
- HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...
- css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- 让bootstrap-table支持高度百分比
更改BootstrapTable.prototype.resetView 方法,以支持高度百分比定义,适应不同高度屏幕 BootstrapTable.prototype.resetView = fun ...
- 父类div高度适应子类div
父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...
- 如何设置div高度为100%
div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...
- 如何让两个 并列的div高度相等
哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(i ...
- div高度自适应（总结：min-height:100px; height:auto;的用法）
对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...
随机推荐
- sleep和wait到底什么区别
wait是在当前线程持有wait对象锁的情况下,暂时放弃锁,并让出CPU资源,并积极等待其它线程调用同一对象的notify或者notifyAll方法.注意,即使只有一个线程在等待,并且有其它线程调用了 ...
- 基于矩阵模式的 Web 软件测试手段(转)
http://www.ibm.com/developerworks/cn/web/1410_dujing_matrixfortest/ 在 Web 测试中,我们经常针对某个测试点进行多种场景测试,或者 ...
- 利用ExtJS导出Excel
Ext.ns("Msp.Component"); //config = { // fileName : "净值及头寸核对", // exportDate : & ...
- poj 1742 Coins （多重背包）
http://poj.org/problem?id=1742 n个硬币,面值分别是A1...An,对应的数量分别是C1....Cn.用这些硬币组合起来能得到多少种面值不超过m的方案. 多重背包,不过这 ...
- CMS 垃圾回收日志
CMS 垃圾回收日志 https://blogs.oracle.com/poonam/entry/understanding_cms_gc_logs http://www.blogjava.net/D ...
- 函数lock_rec_create
/*********************************************************************//** Creates a new record lock ...
- 如何添加真机调试的iOS设备
注意点: 有时需要同意协议什么的,很多时候刷新出来都是白屏,解决办法: 对于不能确认新协议的问题,我发现了一个解决方法:登陆后,直接在浏览器的地址框访问:https://developer.apple ...
- 关于ios越狱开发的那些事
也许吧,每每接触某些新东西的时候,都有点犯晕吧,这不是应该要的. 第一次接触ios越狱开发,也是这样吧.这篇主要是从无到有的说一下ios越狱的开发,网上很多的教程大部门都比较旧了吧,放在新设备上总是出 ...
- scala学习笔记(4)：占位符
scala 中占位符的用法 1.作为“通配符”,类似Java中的*.如import scala.math._ 2.:_*作为一个整体,告诉编译器你希望将某个参数当作参数序列处理!例如val s = s ...
- 【网络】TCP三次握手
在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认:第二次握手: ...