HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/HobHunter/article/details/73611192
给div设置height:100%;
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>div高度</title>
<style>
*{margin:0;padding:0}
.nav{
width:200px;
height:100%;
background-color:#c7c7c7;
}
</style>
</head>
<body>
<div class="nav">
divdivdiv
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可div并没有按照所想的那样展开，但将div设置固定高度时能够正常展开，这是什么原因?
经过查找资料后，在给元素设置百分比高度时要制定父布局高度。正常情况下最外层的父布局是根据内容来确定的，正如上图，div的高度是21px。html的高度也是21px。既然知道问题原因后，那下面的事情就好办了。
解决方法一：
给外层设置高度为：100%
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta charset=utf-8>
<title>div高度</title>
<style>
*{margin:0;padding:0}
.nav{
width:200px;
height:100%;
background-color:#c7c7c7;
}
</style>
</head>
<body style="height:100%">
<div class="nav">
divdivdiv
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
解决方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>div高度</title>
<style>
*{margin:0;padding:0}
.nav{
width:200px;
height:100%;
position:fixed;
background-color:#c7c7c7;
}
</style>
</head>
<body>
<div class="nav">
divdivdiv
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
可能会疑问为什么要用position:fixed。先看下W3C手册怎么说的吧~
是不是秒懂的节奏！？？
两种方法各有不同。可以根据实际情况来做判断用哪种
HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客的更多相关文章
- div设置百分比高度 宽度
给div按百分比设置高度 宽度两种方法: 第一种是给body标签设置他的高度值,xxxpx,div就会根据body的像素值取百分比: 第二种方法就是在div属性中加入 position:absolut ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- layui 时间插件，change&&done，按照官网写法无效，解决方式！
摘抄自 hahei2020:https://blog.csdn.net/hahei2020/article/details/79285370 layui 时间插件, 当选择时间或时间发生改变后,按照官 ...
- 设置overflow:auto无效的解决办法
做项目中经常要用到滚动条,有时候给div设置overflow无效. 遇到这样的问题,只需要在 F12 Elements面板检查一下要设置overflow的元素的宽高是否大于父级元素宽高. (overf ...
- wordpress设置固定链接无效的解决办法
声明:本人用的是Ubuntu 10.04 LAMP服务 以下内容是针对在Apache服务器下Wordpress修改固定链接出错无效的解决办法: 如果改了固定链接以后出问题,请查看Wordpress根目 ...
- Spring在Thread中注入Bean无效的解决方式
在Spring项目中,有时需要新开线程完成一些复杂任务,而线程中可能需要注入一些服务.而通过Spring注入来管理和使用服务是较为合理的方式.但是若直接在Thread子类中通过注解方式注入Bean是无 ...
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- CSS图片宽度设置百分比 , 高度同宽度相同
在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦. 这里通过 css 来达到我们想要的效果: < ...
- ionic ios 发布设置 header-bar高度无效
在公司app发布过程中发现一旦改过header-bar的高度之后在ios内部或者通过ionic build browser生成的网页打开都不是正常的 通过chrome的查看工具发现自己写的样式被直接覆 ...
随机推荐
- C 语言源代码说明
void bdmain(void){/* 禁止 Cache 和 MMU */ cache_disable(); mmu_disable(); /* 端口初始化 */ port_init(); /* 中 ...
- InsightFace源码以及pre-train模型以及使用
一下摘自:https://blog.csdn.net/Fire_Light_/article/details/79602705 论文链接:ArcFace: Additive Angular Margi ...
- jQuery - DOM对象和jQuery对象
DOM对象 : 直接使用JavaScript获取的节点对象 jQuery对象 : 使用jQuery选择器获取的节点对象 DOM对象和jQuery对象分别拥有一套独立的方法, 不能混用 <scri ...
- js 截取url中的参数
getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var ...
- System.Drawing.Graphics.cs
ylbtech-System.Drawing.Graphics.cs 1.程序集 System.Drawing, Version=4.0.0.0, Culture=neutral, PublicKey ...
- let能否完全替代IIFE
let是什么 http://es6.ruanyifeng.com/#docs/let 最近,我写了一篇关于syntax of Java’s IIFE pattern的文章,来解释为什么我们用现在的方式 ...
- Collection单列集合中的常用实现类
Collection 集合层次的根接口 List 有序 有索引 可以重复 ArrayList 底层数据结构是数组 查询快 增删快 线程不安全 效率高 LinkedList 底层数据结构是链表 查询慢 ...
- javaSpring学习总结day_02
使用注解注入: 1.用于创建bean对象 @Component: 作用:相当于配置了一个bean标签 位置:类上面 属性:value,含义是bean的id,当不写时,有默认值,默认值是当前类的短名,首 ...
- LeetCode 38.报数(Python3)
题目: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 "one 1& ...
- [转]C#的扩展方法解说
C#的扩展方法解说 扩展方法的目的就是为一个现有类型添加一个方法,现有类型既可以是int,string等数据类型,也可以是自定义的数据类型. 为数据类型的添加一个方法的理解:一般来说,int数据类型有 ...