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能够保持一个固定的高度. ...
随机推荐
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法 文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
- (5)XML转化成TXT
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- 解决docker中DNS查询的问题
I got a dns error that i can not access dns server, that caused by : /etc/resolv.conf you can find t ...
- Struts标签、Ognl表达式、el表达式、jstl标签库这四者之间的关系和各自作用
我之前虽然会用,但是一直分不清彼此之间有什么区别,所以查找资料,将它们进行整合区分,加深了解, 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的 ...
- 导出到Excel并且取消默认的科学计算法
导出Excel的代码很多,其中这种最简单: protected void btnDCAll_Click(object sender, EventArgs e) { ...
- hibernate.cfg.xml文件的说明
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...
- Android开源库--SlidingMenu左右侧滑菜单
如果说我比别人看得更远些,那是因为我站在了巨人的肩上. github地址:https://github.com/jfeinstein10/SlidingMenu 设置: 1.下载之后以依赖项的 ...
- UVa 10106 Product
高精度乘法问题,WA了两次是因为没有考虑结果为0的情况. Product The Problem The problem is to multiply two integers X, Y. (0& ...
- Activiti 多个并发子流程的应用
多个部门发起资金计划,最后统一到财务部审批,每个部门发起资金计划是一个子流程,财务部审批是多个部门的计划同时审批,审批完成后,再提交上级领导审批. 流程如下: 要解决以上问题,需要实现多个子流程并行处 ...
- tornado 实践 - 目录结构
. ├── README.md └── store_management ├── Session.vim ├── auth │ ├── __init__.py │ ├── views.py ├ ...