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的查看工具发现自己写的样式被直接覆 ...
随机推荐
- 【转】Windows（server2008）下使用VisualSVN Server搭建SVN服务器
参考文献 1.Windows下使用VisualSVN Server搭建SVN服务器(百度经验) 挺好就是没有配图已验证可用 2.在Windows Server 2008上部署SVN代码管理器 把第二 ...
- CSS在工程中改变之面向对象的 CSS
oocss的概念 众多开发者忽视了css的表现(认为它) oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例. oocss的作用 1.加强代码 ...
- 安装Epson打印机但因lsb依赖错误而中断的驱动程序
sudo apt-get install printer-driver-escpr 安装Epson打印机但因lsb依赖错误而中断的驱动程序 问题: 我正在安装 Epson XP-310 驱动程序,从这 ...
- bc 进制间转换
我们通过bc的ibase和obase方法来进行进制转换 ibase是输入数字的进制,而obase就是输出数字的进制 两种方式进行转化 交互式的 ==注意:需要先设置obase== [root@dev ...
- [JZOJ2679] 跨时代
题目 题目大意 给你一堆边,你要将它们围成面积最大的矩形. 边不一定要用完,而且围成的矩形不能凸出一块. \(n\leq 16\) \(l_i \leq 15\) 思考历程 看到这题的第一眼,就会立马 ...
- 廖雪峰Java16函数式编程-2Stream-4map
1. map()简介 Stream.map()是一个Stream的转换方法,把一个stream转换为另一个Stream,这2个Stream是按照映射函数一一对应的. 所谓map操作,就是把一种操作运算 ...
- mysql 查询当前日期
1.本年份 SELECT DATE_FORMAT(NOW(), '%Y'); 2.本月份(显示数字) SELECT DATE_FORMAT(NOW(), '%m'); 3.本月份(显示英文) SELE ...
- Windows start
启动一个单独的窗口以运行指定的程序或命令. START ["title"] [/D path] [/I] [/MIN] [/MAX] [/SEPARATE | /SHARED] ...
- Perl 数组
Perl 数组 Perl 数组一个是存储标量值的列表变量,变量可以是不同类型. 数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取,实例如下: 实例 #!/usr/b ...
- 命令学习_nslookup
nslookup 域名 这是最常用最简单的用法,可以直接获得目标域名的IP地址和CNAME. 如下是A记录的返回情况 nslookup命令会采用先反向解释获得使用的DNS服务器的名称,上图中ns.gu ...