height:100%失效

最新推荐文章于 2023-11-03 11:20:12 发布
最新推荐文章于 2023-11-03 11:20:12 发布
阅读量781 收藏
点赞数
分类专栏： csshack 文章标签： height100无效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xpf_show/article/details/38231039
版权

height明明设置了100% 为什么却看不到效果。很多时候在基础不是很扎实的时候，经常会遇到这样的问题，究其原因其实简单


首先你要确保

html{height:100%;}
body{height:100%;}
这样的话，在加载页面时，会获取设置页面的高度为可视窗口的高度，即100%；这样去设置子层级时，才能获取达到你想要的高度值

壹间show
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE6 CSS高度height:100% 计算失效/无效
09-25
然而，在Internet Explorer 6 (IE6) 这个古老的浏览器中，`height: 100%` 的计算方式与现代浏览器有所不同，这导致了在某些情况下高度计算失效或无效的问题。 首先，我们要理解`height: 100%` 的工作原理。当一个...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
`box-sizing`属性允许我们控制元素的盒模型，从而改变`width`和`height`如何计算。盒模型包括内容区（content）、内边距（padding）和边框（border）。在传统的CSS2.1盒模型中，元素的宽度和高度只包含内容区，不...
微信小程序overflow-x超出部分样式不渲染
最新发布
Giraffe0615的博客
11-03 745
把display:flex改成display:inline-flex，将对象作为内联块级弹性伸缩盒显示，类似与是子元素将父元素撑开，样式就显示出来了
ios x及以上版本H5页面高度100%、100vh自适应滚动条问题
TheHtmler的博客
12-13 5751
一、问题 在项目实践过程中，会遇到移动端h5页面高度的自适应问题，比如在chrome devtools下的iphonex，默认高度812px，实际高度是852px，倒是在手机端浏览会有滚动条，很烦～ 二、方案 height设置 100vh 或者height设置 100% ➕ overflow-y:hidden; 要么会出现滚动条，要么会出现下面出现40px白底 解决方案：在index.html中，meta标签添加 viewport-fit=cover，done～～ <meta name
设置height:100%无效的原因以及两种解决方法
小多的博客
01-04 2万+
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div> 解决方法一：设置父元素高度 html, bod
safari中高度100%失效问题及解决方案
weixin_34391445的博客
05-30 5144
这是一个在Vue项目中嵌套iframe产生的问题，具体表现为：在Safari浏览器中，页面渲染完成后，拉伸页面宽度，iframe中的内容高度溢出，且无法滚动到溢出部分。chrome、firefox都没有发生这个问题，虽然知道是CSS在Safari中的解析差异引起的，但具体是什么原因，还需要做定位，避免后续同类问题的采坑。vue项目源代码大致如下：<html> <head&...
vue中设置height:100%无效的问题及解决方法
12-29
在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。 App.vue文件 [removed] export default { name: 'App' } [removed] <style> #app { font-family: '...
为啥你的height:100%不起作用？
热门推荐
yanchenxi313761的博客
03-04 3万+
  1、百分比宽高 的设定  对于w3c中对width 与height的解释，可以明确%设定宽高是根据父级宽高来定的：2、width：100%随意写一段代码，设置一个背景颜色以便查看效果    可以看到，宽度的100%很容易实现，但是height:100%就有点难，这是为什么呢？3、浏览器是如何计算高度与宽度的Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那...
iphone x 高度:100%; 兼容设置
weixin_30871905的博客
01-22 496
问题： 　　iphone x 会遇到页面设置 height:100%;之后但是底部还有一定的高度没有覆盖 解决方法： 　　1.让客户端设置webview的高度为100%; 　　2.html代码里面添加 viewport-fit=cover ，这个ios11的新属性可以使得页面内容完全覆盖整个窗口 相关代码： <meta name="viewport" content="wid...
设置height=100%不好使原因与解决
404 not found
06-11 3812
之前写项目时候发现在设置height:100%不生效，而且设置body:height:100%也是不生效，于是在就查询原因，终于找到不生效的原因：In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify...
ipad html高度设置,用于 iOS iPad的100%高度 CSS_html_开发99编程知识库
weixin_28745525的博客
06-17 244
( 我已經閱讀了 Mobile Safari的主題，以及它如何以不同的方式顯示一些定位和css樣式。我仍在嘗試解決 background 內容佔用整個顯示高度的問題，我希望能夠與桌面收縮瀏覽器。 相反，內容只有 100%個寬度。background 內容有自己的標籤。 我正在使用媒體查詢，所以在手機上沒有 background 內容，暫時我把平板顯示器變成了無。 如果我轉向 block，我發現我可...
height：100%失效解决办法
weixin_34414196的博客
03-23 668
首先我们要知道height:100%能生效有两种情况。 第一种是父级有显性高度，即写了具体值。当然从 html 一直往下都赋予height:100%也是属于这种情况。（html=&gt;body=&gt;...=&gt;父级=&gt;目标元素）。 当然设置 max-height 与 min-height 对height:100%的多数情况是没用的，它们只是设置边界而不是设置具体值。 第...
CSS--DIV height:100%无效的解决办法
每一件自己觉得值得的事都要不留余力的去做
07-06 6611
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:”height:100%;””是无效的。那么如何才能让div的css height:100%生效呢？解决办法很简单……在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:”hei
show()方法和hide()方法
妖怪的博客
03-27 1万+
1.show()方法和hide()方法是jquery中最基本的动画方法.为一个元素调用hide()方法,会将该元素样式改为none $("element").hide()与$("element").css("display","none")相同 2.当把元素隐藏后,可以使用show()方法将元素diplay样式设置为先前的显示状态 3.show()方法和hide()方法让元素动起来 show()方法和hide()方法在不带任何参数的情况下,相当于css("display","none/block/
H5页面在安卓中设置height:100%;依然无法充满屏幕的解决方法
奥巴牛的博客
04-19 6823
在开发过程中，需要在H5页面点击出遮套层，电脑上调试正常显示，但是在app中内嵌H5页面时，遮套层总会在屏幕下方留一个缝隙（已经设置了height:100%）。经过排查，将position:absolute改为position：fixed;即可解决；...
navue中width:100%;100%失效解决案例
06-09
在 Navue 中，如果 `width: 100%;` 和 `height: 100%;` 失效，可能是因为父元素没有设置宽度和高度，或者父元素的 `position` 属性不是 `relative` 或 `absolute`。 解决这个问题的方法是给父元素设置宽度和高度，或者将父元素的 `position` 属性设置为 `relative` 或 `absolute`。 例如，如果你想让一个 `div` 元素的宽度和高度都为屏幕的宽度和高度，你可以这样写： ```html <template> <div class="fullscreen"> <!-- 在这里放置你的内容 --> </div> </template> <style> .fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> ``` 在这个例子中，我们给 `div` 元素添加了一个 `fullscreen` 类，将其 `position` 属性设置为 `fixed`，并将宽度和高度都设置为 `100%`。这样，这个 `div` 元素就会占满整个屏幕。 希望这个解决方案能够帮助到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值