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的查看工具发现自己写的样式被直接覆 ...
随机推荐
- 笔记：Python实现二分查找
def search(sequence, number, lower=0, upper=None): if upper is None: upper = len(sequence) - 1 if lo ...
- iOS_iPhone App自动化测试
无线客户端的发展很快,特别针对是android和ios两款无线操作系统的客户端应用,相应的测试工具也应运而生,这里主要给大家介绍一些针对 iPhone App的自动化测试工具. 首先 ...
- SQL链接EXCEL操作
Sub CopyData_5() Set Cnn = CreateObject("ADODB.Connection")With Cnn.Provider = "micro ...
- 【bug】vue同一组件使用
vue使用同一个组件渲染,进行切换过程中会存在数据保存的情况. 比如路由切换,进行渲染的页面来自同一个组件,这个时候,要在监听路由的时候,将数据重新初始化
- CF698F Coprime Permutation
题意:求有多少种符合要求的排列满足对于所有i,j,当gcd(i,j)=1时,gcd(pi,pj)=1. 排列上的一些位置给出. 标程: #include<bits/stdc++.h> us ...
- soj115 御坂网络
题意:平面上有n个A发射点和m个B发射点,可以选择安置相应A/B装置,装置范围是圆,自取半径(要求都相同且<=Rmax).异种要求范围不相交.求装置范围之和(不是并!). 标程: #includ ...
- 获取硬件信息的delphi源码CPUID、操作系统、Mac物理地址、计算机名称、IP地址、用户名
{-----------------------------------------------------------------------------作者:sushengmiyan 2013.0 ...
- mongodb操作指令(一)：数据库，集合，文档
数据库 查看所有数据库 show dbs 查看当前数据库 db 创建使用数据库use runoob 删除数据库 db.dropDatabase() 集合 创建集合db.createCollection ...
- Android中visibility属性
Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为“visible ”.“invisible”.“gone”.主要用来设置控制控件的显示和隐藏. 1) 可见(visi ...
- redis：info详解
[root@192.168.56.159 redis6380]redis-cli -a xxx info# Serverredis_version:3.0.7 redis_version: Redi ...