Css高度设置成百分比，结果运行出错；Css height in percent not working

最新推荐文章于 2023-03-16 17:37:49 发布
最新推荐文章于 2023-03-16 17:37:49 发布
阅读量186 收藏
点赞数
分类专栏： Html Css 文章标签： css height %不起作用 width % 可以 height %不可以
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43814775/article/details/102735783
版权

Css height用%来定义的时候它并不起作用

<!DOCTYPE html>
<html>
<head>
<title>Height</title>
<style>
	body {
      margin: 0px;
      padding: 0px;
      width:100%;
      height:100%;
    }
	.problem
	{
	width:100%;
	height:85%;
	background-color:grey;
	}
	</style>
 </head>
 <body>
 <div class="problem">
  	My name is Tokyo
 </div>
 </body>
</html>

在这里插入图片描述
明明设置了height:85%，可在页面加载的结果只有width：100%

解决办法：

  1. html, body { height: 100%; }
    第一种方法不行的话
.problem
	{
	width:100vh;    // 把原来的100%改成100vh
	height:85vh;
	background-color:grey;
	}

在这里插入图片描述
vh（View-Height）vw（View-Width） 100vw means 100% of the viewport width
height：85% = height：85vh
width：85% = width：85vw

동경
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot集成kafka全面实战
Felix
03-28 20万+
本文是SpringBoot+Kafka的实战讲解，如果对kafka的架构原理还不了解的读者，建议先看一下《大白话kafka架构原理》、《秒懂kafka HA（高可用）》两篇文章。 一、生产者实践 普通生产者 带回调的生产者 自定义分区器 kafka事务提交 二、消费者实践 简单消费 指定topic、partition、offset消费 ...
CSS中的字体大小设置属性总结
01-19
在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EMS优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。...
Java8新特性及实战视频教程完整版
07-27
Java8新特性及实战视频教程完整版Java 8 API添加了一个新的抽象称为流Stream，可以让你以一种声明的方式处理数据。Stream 使用一种类似用 SQL 语句从数据库查询数据的直观方式来提供一种对 Java 集合运算和表达的高阶抽象。Stream API可以极大提高Java程序员的生产力，让程序员写出高效率、干净、简洁的代码。这种风格将要处理的元素集合看作一种流， 流在管道中传输， 并且可以在管道的节点上进行处理， 比如筛选， 排序，聚合等。元素流在管道中经过中间操作（intermediate operation）的处理，最后由最终操作(terminal operation)得到前面处理的结果。 Lambda 表达式，也可称为闭包，它是推动 Java 8 发布的最重要新特性。Lambda 允许把函数作为一个方法的参数（函数作为参数传递进方法中）。使用Lambda 表达式可以使代码变的更加简洁紧凑。Java8实战视频-01让方法参数具备行为能力Java8实战视频-02Lambda表达式初探Java8实战视频-03Lambda语法精讲Java8实战视频-04Lambda使用深入解析Java8实战视频-05Lambda方法推导详细解析-上.wmvJava8实战视频-06Lambda方法推导详细解析-下Java8实战视频-07Stream入门及Stream在JVM中的线程表现Java8实战视频-08Stream知识点总结Stream源码阅读Java8实战视频-09如何创建Stream上集Java8实战视频-10如何创建Stream下集.wmvJava8实战视频-11Stream之filter，distinct，skip，limit，map，flatmap详细介绍Java8实战视频-12Stream之Find，Match，Reduce详细介绍Java8实战视频-13NumericStream的详细介绍以及和Stream之间的相互转换Java8实战视频-14Stream综合练习，熟练掌握API的用法Java8实战视频-15在Optional出现之前经常遇到的空指针异常.wmvJava8实战视频-16Optional的介绍以及API的详解Java8实战视频-17Optional之flatMap，综合练习，Optional源码剖析Java8实战视频-18初识Collector体会Collector的强大Java8实战视频-19Collector使用方法深入详细介绍-01Java8实战视频-20Collector使用方法深入详细介绍-02Java8实战视频-21Collector使用方法深入详细介绍-03.wmvJava8实战视频-22Collector使用方法深入详细介绍-04Java8实战视频-23Collector原理讲解，JDK自带Collector源码深度剖析Java8实战视频-24自定义Collector，结合Stream的使用详细介绍Java8实战视频-25Parallel Stream编程体验，充分利用多核机器加快计算速度Java8实战视频-26Fork Join框架实例深入讲解Java8实战视频-27Spliterator接口源码剖析以及自定义Spliterator实现一个Stream.wmvJava8实战视频-28Default方法的介绍和简单的例子Java8实战视频-29Default方法解决多重继承冲突的三大原则详细介绍Java8实战视频-30多线程Future设计模式原理详细介绍，并且实现一个Future程序Java8实战视频-31JDK自带Future,Callable,ExecutorService介绍Java8实战视频-32实现一个异步基于事件回调的Future程序.wmvJava8实战视频-33CompletableFuture用法入门介绍Java8实战视频-34CompletableFuture之supplyAsync详细介绍Java8实战视频-35CompletableFuture流水线工作，join多个异步任务详细讲解Java8实战视频-36CompletableFuture常用API的重点详解-上Java8实战视频-37CompletableFuture常用API的重点详解-下Java8实战视频-38JDK老DateAPI存在的问题，新的DateAPI之LocalDate用法及其介绍.wmvJava8实战视频-39New Date API之LocalTime，LocalDateTime，Instant，Duration，Period详细介绍Java8实战视频-40New Date API之format和parse介绍
IDEA中使用org.springframework.boot.autoconfigure.AutoConfiguration.imports没有被识别
Zhangsama1的博客
02-24 1万+
在SpringBoot2.7.x版本之后，慢慢不支持META-INF/spring.factories文件了，需要导入的自动配置类可以放在/META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports文件中，可以看下spring-boot-autoconfigure-2.7.7.jar下的这个文件。所以正确的操作是先创建META-INF目录，然后在其下面创建spring目录，然后把这个文件放进去即可。
Java定时任务之--schedule与scheduleAtFixedRate异同
u011368399的专栏
01-16 3092
schedule 执行任务超时，第N个任务会在 N-1个任务执行完成后，不做period等待，立即启动执行；N任务执行未超时，N+1个任务会在N任务执行完成后，等待period，再执行。
PowerJob容器的前世，容器是如何产生，如何上传到Server上去的
zcrazy的博客
02-21 856
这不仅仅是一篇PowerJob源码分析的文章，还有很多的java基础知识，在实践中学习效果更好，感兴趣就留下来交流一下吧。
详解CSS3 rem(设置字体大小) 教程
01-19
在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。...
CSS Font-Size: em、px 、pt 、Percent之间的关系及换算
09-25
主要介绍了CSS Font-Size: em、 px 、pt 、Percent之间的关系及换算，本篇整理的还是比较详细的，需要的朋友可以参考下
简单实用的纯CSS百分比圆形进度条插件
12-13
**CSS3库：percircle——打造美观的百分比圆形进度条** 在网页设计中，进度条是一种常见的元素，用于展示任务或数据加载的进度。在众多的进度条实现方式中，`percircle`是一个专为纯CSS打造的百分比圆形进度条插件...
Timer.schedule方法的使用
冰雪世界
07-08 5万+
java.util.Timer定时器的常用方法如下： schedule(TimerTask task, long delay) // 延迟delay毫秒后，执行一次task。 schedule(TimerTask task, long delay, long period) // 延迟delay毫秒后，执行第一次task，然后每隔period毫秒执行一次task。 举例： TimerTask ......
Spring事务报错： org.springframework.transaction.UnexpectedRollbackException
qq_34041723的博客
03-16 3658
由于ServiceA的传播属性也为PROPAGATION_REQUIRED，所以ServiceA会创建一个事务，然后ServiceB与ServiceA使用同一个事务，ServiceB出现异常后，将当前事务标志位回滚，由于在ServiceA中做了trycatch处理，程序没有终止而是继续往下走，当事务commit时，check状态，发现，需要事务回滚，所以才会出现不可预知的事务异常:因为事务被标志位回滚，所以事务回滚。异常信息：支持当前事务，如果不存在则抛出异常。事务被回滚，因为它被标记为仅回滚。
内连接（join、inner join ）、左连接（left join） 、全连接（full join）
编程技术分享，Java后端、Vue前端
12-07 5529
建表： drop table t_test1; drop table t_test2; create table t_test1( aid number(10), aname varchar2(40) ); create table t_test2( bid number(10), bage varchar2(40) ); 插入： insert into t_test1 (AID, ANAME) values (1, '张三'); insert into t_test1 (AID, ANAME) va
css3新单位vw、vh、vmin、vmax的使用详解
热门推荐
moyan的博客
07-25 7万+
1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。 （2）具体描述如下： vw：视窗
springboot自动装配原理
weixin_43950558的博客
06-10 5276
springboot自动装配
java.lang.ClassNotFoundException: org.apache.poi.util.TempFileCreationStrategy解决方案
weixin_43949154的博客
12-21 1万+
再用easyExcel导出的时候，写到如下代码报错 EasyExcel.write(response.getOutputStream(), Excel.class).sheet("导出信息").doWrite(list); 报如下几种错误，奇怪的是每次都报的不一样 java.lang.NoClassDefFoundError: Could not initialize class com.alibaba.excel.write.ExcelBuilderImpl java.lang.ClassNotFou
Failed to start bean 'org.springframework.kafka.config.internalKafkaListenerEndpointRegistry'
weixin_40805072的博客
02-12 3万+
java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.context.cache.DefaultCacheAwareContextLoaderDelegate.loadContext(DefaultCacheAwareContextLoaderDelegat...
SQL中时间处理总结
pscool的博客
03-28 1191
TIMESTAMPDIFF() 计算两个时间日期的时间差、 # 计算两个日期时间的时间差值 TIMESTAMPDIFF(time_type, begin_time, end_time) -- time_type参数(最后获取时间差的单位) /** SECOND / 秒 MINUTE / 分钟 HOUR / 小时 DAY / 天 MONTH / 月 YEAR / 年 */ -- begin_time 开始时间或开始时间字段 -- end_time 结束时间或结束时间字段 例如：获取某两个时间的时间
Spring Cloud OpenFeign 原理
杨宇昌的博客
04-28 1106
Spring Cloud OpenFeign
Spring启动之CommonDefinitionAnnotations(AnnotatedBeanDefinition abd, AnnotatedTypeMetadata metadata) 解析
研究生生活、学习记录
09-17 562
前言 本文旨在分析在Spring容器启动之时，针对特定注释的解析需要使用题目中所述方法，该方法的寻找路劲为：特定的注释的解析 ①org.springframework.context.annotation.AnnotatedBeanDefinitionReader#registerBean(java.lang.Class<?>) ---> ②org.springframework.context.annotation.AnnotatedBeanDefinitionReader#doR
css3实现圆环百分比进度
最新发布
06-11
可以使用CSS3中的transform和animation属性来实现圆环百分比进度的效果，具体步骤如下： 1. 创建一个圆环的基本样式，设置圆环的宽度、颜色和边框样式： ``` .progress { width: 100px; height: 100px; border: 10px solid #eee; border-radius: 50%; position: relative; } .progress:before { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #ccc; position: absolute; top: 0; left: 0; } ``` 2. 使用transform属性将圆环旋转90度，使起点从顶部开始： ``` .progress:before { transform: rotate(-90deg); } ``` 3. 使用animation属性设置动画效果，将圆环的进度从0%到指定百分比： ``` .progress:after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #000; position: absolute; top: 0; left: 0; transform: rotate(-90deg); animation: progress 2s ease-out forwards; } @keyframes progress { from { transform: rotate(-90deg); } to { transform: rotate(calc(-90deg + (360 * 80 / 100))); } } ``` 其中，animation属性中的forwards参数表示动画结束后保持最后一帧状态，calc函数用来计算旋转角度。 4. 在HTML中添加进度条的容器，并设置对应的百分比： ``` <div class="progress" data-progress="80"></div> ``` 5. 使用JavaScript获取进度条容器和其对应的百分比，将百分比值设置为圆环的进度： ``` const progress = document.querySelector('.progress'); const percent = progress.getAttribute('data-progress'); progress.style.setProperty('--progress', `${percent}%`); ``` 6. 最后，在CSS中使用var函数获取JavaScript设置的进度值，并将其应用到圆环的进度样式中： ``` .progress:after { transform: rotate(calc(-90deg + (360 * var(--progress) / 100))); } ``` 这样就可以实现一个简单的圆环百分比进度条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值