height:100vh的应用

最新推荐文章于 2024-03-06 15:14:05 发布
最新推荐文章于 2024-03-06 15:14:05 发布
阅读量520 收藏 1
点赞数
分类专栏： 开发问题 文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40121676/article/details/103807096
版权

今天改移动端页面样式的时候因为height:100vh，导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。

别人解释的height:100vh

vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
但是设置height:100vh，该元素会被撑开屏幕高度一致。

但是会出现问题。当前我的页面内容过多，需要滚动条显示的时候，滚动到最下，还是无法显示我页面的全部内容，因为我顶部有其他标签。
在这里插入图片描述
所以说根据情况碰一碰啥样的情况可以用…滚去打代码了

JiAyInNnNn123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
height.css：freecodecamp
02-12
.height-100 { height: 100px; } .height-50pct { height: 50%; } ``` 开发人员只需简单地添加这些类到HTML元素上，就可以快速实现所需的高度效果，提高了代码的可维护性和复用性。 总结，`height.css`在网页设计中...
vh_motors
03-15
在"vh_motors"这个主题下，我们可以推测这是一个与汽车或者摩托车相关的网站或者应用的前端设计项目，其中可能涉及到了CSS在布局、视觉效果和交互设计上的应用。 "vh"在CSS中是相对单位，代表viewport height（视口...
解决height:100vh超出屏幕高度的问题
春晨秋遇的博客
12-16 1万+
min-height : calc ( 100vh - 头部 / 底部的高度 )
height:100vh
Sue's blog
12-12 457
关于 height:100% 和 height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
关于height和min-height的区别
weixin_44979475的博客
06-28 2414
关于height和min-height的区别
【CSS基础】关于height:100%和height:100vh的区别
Milk~每天分享一点点，技术进步一点点
09-11 1912
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
纯css3使用vw和vh实现自适应的方法
09-24
2. **vh (viewport height)**：1vh等于当前视口高度的1%。同样，如果设备视口高度为400px，那么1vh等于4px。 另外，还有两个相关的单位： 3. **vmin**：选取vw和vh中较小的一个作为单位值。 4. **vmax**：选取vw和...
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
- **vh（viewport height）**：类似地，表示视窗高度的百分比。1vh等于视窗高度的1%。 - **vmin**：取当前视窗宽度（vw）和高度（vh）中较小的那个值作为单位。 - **vmax**：取当前视窗宽度（vw）和高度（vh）中...
2:2.5
03-04
height: calc(2.5 * 100px); } ``` 在这个例子中，`100px`可以替换为任何基础尺寸，元素的宽度会是这个基础尺寸的两倍，高度则是两倍半。 CSS还支持盒模型，包括内容区域（content）、内边距（padding）、边框...
CSS | CSS中height:100vh和height:100%的区别
青春木鱼的博客
06-15 9093
1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%
css3中的width:100vh以及calc(100vh + 10px)
热门推荐
qq_24581629的博客
05-17 4万+
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWid
在css中 height: 100vh；与height: 100%；有什么区别？
最新发布
weixin_46300114的博客
03-06 1285
生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么。表示元素的高度将占据视口（浏览器窗口）的高度。无论父元素的高度如何，使用。将使元素占据整个视口的高度，这对于实现全屏或类似效果非常有用。在实际应用中，如果您想让一个元素占据整个视口的高度，可以使用。表示元素的高度将与其父元素的高度相同。如果想让一个元素与其父元素等高，可以使用。在 CSS 中有着不同的含义和应用场景。，前提是父元素具有明确定义的高度。是相对于父元素的高度，而。是相对于视口的高度。
关于height:100%和height:100vh的区别
u014644574的博客
10-23 4180
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh ==height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
css属性：min-height是什么意思？
吴冬雪的博客
04-19 4253
意思是说，一个块元素，高度如果小于20px，那么这个块元素就不会再自动变小，而是保持20px不变。如果大于20px，那么不受限制。至于，取值100%的意思，是这个高度值使用父元素的高度值做限定。比如min-height:20px;最小高度的意思，这是。
Height：100vh
NnbNnb的博客
10-26 556
Height：100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
前端设置宽高时height： 100% 和 100vh 的区别
qq_40685439的博客
11-28 3284
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是说 hei
div { width: 50vw; height: 30vh; }
06-10
- `height: 30vh;` 设置 `div` 元素的高度为视口高度的 30%。`vh` 单位表示视口高度的百分比，即 1vh 等于视口高度的 1%。 这段代码的意思是，将 `div` 元素的宽度设置为视口宽度的一半，高度设置为视口高度的三分...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值