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能够保持一个固定的高度. ...
随机推荐
- [原]poj-1611-The Suspects（水并查集）
题目链接:http://poj.org/problem?id=1611 题意:输入n个人,m个组.初始化0为疑似病例.输入m个小组,每组中只要有一个疑似病例,整组人都是疑似病例.相同的成员可以在不同的 ...
- < %=...%>< %#... %>< % %>< %@ %>具体意义
< %=...%>< %#... %>< % %>< %@ %>< %#... %>: 是在绑定控件DataBind()方法执行时被执行,用 ...
- How Uuencoding Works
做题目学习 https://www.zhihu.com/question/26598476/answer/45396765 http://email.about.com/od/emailbehind ...
- JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 一,概述 在Java语言中 ...
- hdu 4856 Tunnels (bfs + 状压dp)
题目链接 The input contains mutiple testcases. Please process till EOF.For each testcase, the first line ...
- 【第二篇】.NET用NPOI读取Excel表格并在页面预览
博主用的是npoi2.0.1,支持.xls也支持.xlsx 直接上代码吧. <table class="table table-bordered table-striped" ...
- 在 VC6 中使用 GdiPlus-使用
下面用 VC6 来写一个 GdiPlus 的 Demo 工程 Step1:新建一个名为 Demo_GdiPlus 的 MFC AppWizard(exe) 工程 操作步骤:(1)主菜单File-> ...
- HDU 5316 Magician （线段树，单值修改，微变形）
题意:给一个初始序列A[1,n],第j个数字代表精灵j的power值,有两种操作:(1)查询区间[L,R] (2)修改某个精灵的power值. 但,查询的是区间[L,R]中一个美丽子序列sub[l,r ...
- QCon 2015 阅读笔记 - 移动开发最佳实践
所有ppt下载地址:http://pan.baidu.com/s/1mg9o4TM 下面是移动开发实践部分的阅读笔记. 移动开发网络性能优化实践 - 陈浩然 (携程) 携程是非常标准的移动App架构, ...
- 每天一个Linux命令(2): ls
ls命令是linux下最常用的命令.ls命令就是list的缩写缺省下ls用来打印出当前目录的清单如果ls指定其他目录那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看linu ...