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的查看工具发现自己写的样式被直接覆 ...
随机推荐
- fso文件夹操作用法实操
Sub 订单转换()Application.ScreenUpdating = FalseOn Error Resume Next Dim fso, fl, m%, n%, p%, q& Dim ...
- JAVA算法之高级排序
本章介绍两种高级排序,希尔排序和快速排序,这两种排序比之前讲到的简单排序都要快很多:希尔排序大约需要O(N*(logN)2)的时间,快速排序的时间复杂度为(N*logN),这两种算法和我们在讲递归的时 ...
- bzoj2322 梦想封印
题意和题解见思路索引. 标程及易错点: #include<bits/stdc++.h> using namespace std; typedef long long ll; ll read ...
- phonegap 开发指南系列----简介（2）
一.简介 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的Ja ...
- CSS-基本语法/引用/文本设置/选择器/css3属性
CSS-基本语法/引用/文本设置 css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设 ...
- duilib教程之duilib入门简明教程9.界面布局
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...
- 类的反射实例（servlet的抽取）
类的反射实例 具体以后我们写的时候不用写BaseServlet,因为各种框架都已经给我们写好了 所以,user对应的servlet的界面长这样:
- AYITOJ-括号序列-栈的入门
题目描述 给定一个由括号组成的字符串 问其是否为一个合法的括号序列 合法的括号序列的定义如下 1. 空字符串是合法的括号序列 2. 若字符串A是合法的括号序列, 那么{A},[A],(A)也是合法的括 ...
- 使用virtualenv发布Python程序
客户环境不能上网,开始想把所有依赖包下载下来,进入客户环境进行安装.但为了避免出差,部署工作交给其他同事了,我想还是需要更简单的方式. 实验了一下virtualenv是可以的 1. 创建一个新的环境( ...
- Nand Flash 控制器中的硬件 ECC 介绍
ECC 产生方法 ECC 是用于对存储器之间传送数据正确进行校验的一种算法,分硬件 ECC 和软件 ECC 算法两种,在 S3C2410 的 Nand Flash 控制器中实现了由硬件电路(ECC 生 ...