首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS:宽度100%不是屏幕的100%

CSS 样式的宽度为 100%,这并不是屏幕的 100%。实际上,CSS 样式的宽度是相对于其父元素或容器元素的宽度而言的。因此,如果一个元素的父元素或容器元素的宽度小于该元素本身的宽度,则该元素的宽度为 100%,相对于其父元素或容器元素的宽度而言。

例如,如果一个元素的宽度为 200px,而其父元素的宽度为 150px,则该元素的宽度为 100%,相对于其父元素的宽度而言。如果该元素的父元素的宽度为 1000px,则该元素的宽度为 50%,相对于其父元素的宽度而言。

因此,CSS 样式的宽度为 100% 并不能保证该元素在屏幕上的宽度为 100%。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

解决height:100vh超出屏幕高度问题

大家好,又见面了,我是你们朋友全栈君。 废话不多说 , 先来看看问题 期望样子 : 实际样子 : 怎么样 , 看出问题了吧 , 那来看看代码吧 !...( 只看有关代码哦 ) // 此处使用stylus书写样式 .evaluation // 最外边div width 100% height 100vh // 高度为屏幕高度 padding-top..., 所以设置 height : 100vh 本来可以占满屏幕 , 但它会默认将头部和底部也加进去了 , 所以会超出屏幕高度 , 那怎么解决呢 ?....evaluation // 最外边div width 100% min-height: calc(100vh - 0.9rem) //这个页面只有头部,所以将头部高度减去 padding-top...– 0.9rem); 注: 100vh 减去可以是任意像素单位(px、rpx、em等), 此处运算符左右要有空格哟~~ 遇到这个问题小哥哥和小姐姐可以试试哦 , 看有没有解决呀!

3.7K10

css div高度设置100%如何生效!

但是,父元素 height 值是 auto,岂不是现在高度要从原来 192 像素变成 384 像素,然后 height:100%子元素高度又要变成 384 像素,父元素高度 又双倍……死循环了!...因此,当渲染到父元素时候,子元素 width:100%并没有渲染,宽度就是图片加文字内容宽度;等渲染到文字这个子元素时候, 父元素宽度已经固定,此时 width:100%就是已经固定好父元素宽度...宽度不够怎么 办?溢出就好了,overflow 属性就是为此而生。 同样道理,如果 height 支持任意元素 100%,也是不会死循环。和宽度类似,静态 渲染,一次到位。...那问题又来了:为何宽度支持,高度就不支持呢?规范中其实给出了答案。如果包含 块高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为 auto。...要知道,auto 和百分比计算,肯定是算 不了: 'auto' * 100/100 = NaN 但是,宽度解释却是:如果包含块宽度取决于该元素宽度,那么产生布局在 CSS 2.1 中是未定义

5.7K00

css属性width设为100%时

平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件内容宽度。但如果父控件为body,而且没有明确设置body宽度,那么就会出现以下情况了。  ...height:100px;margin:0 auto;border:solid 1px red"> 4 5 浏览器最大化时: ?...分析:在没有明确设定body宽度时,body宽度就是浏览器可显示区域宽度,上面的例子中可显示区域宽度明显小于1000px,也就是说body宽度远远小于1000px。...所以body下控件宽度被设为100%时,也只能是等于或小于浏览器可显示宽度。 解决方法: 1.body设定明确宽度。 2.如果body不能设定明确宽度。...如主内容居中,两边留白处宽度自动,可以在主内容中设定相同背景。

1.3K50

CSS中calc(100%-100px)为什么不加空格会不生效?

css3 计算属性,用于动态计算长度值。...calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准数学运算优先级规则; 先了解一下CSS中基础语法和数据类型: 文档链接》》 在文档这里应该是这里核心语法...但是'px-100px'不属于CSS中任何一个单位,也并无单位定义。 (这个案例,会更加好解释,为什么'-'前后都需要加空格。)...光看calc(100% -100px)和calc(100px -100px)后半部分,'-100px'是不是更像是这里为'-100'和'px'。...因为在CSS中是有负数概念,就像margin和padding中会常常用到负数。再引出一个新例子: width: calc(500px - -100px); 复制代码 再遇到这种情况怎么办?

53430

css3中width:100vh以及calc(100vh + 10px)

vh/vw vh: 相对于视窗高度, 视窗被均分为100单位vh; vw: 相对于视窗宽度, 视窗被均分为100单位vw; vmax: 相对于视窗宽度或高度中较大那个。...其中最大那个被均分为100单位vmax; vmin: 相对于视窗宽度或高度中较小那个。...calc calc是英文单词calculate(计算)缩写,是css3一个新增功能,用来指定元素长度。...不过calc()最大好处就是用在流体布局上,可以通过calc()计算得到元素宽度。 calc是 css3提供一个在css文件中计算值函数: 用于动态计算长度值。..., “/” 运算; calc()函数使用标准数学运算优先级规则; calc(100vh - 10px) 表示整个浏览器窗口高度减去10px大小 calc(100vw - 10px) 表示整个浏览器窗口宽度减去

80820

100 种语言速成】第 3 节:CSS

但是最后一个建议并不太疯狂——HTML 可能不是一种编程语言,但 CSS 基本上变成了一种语言! 这一集不是关于居中元素或任何类似的事情,我们将用 CSS 编写真正程序! Hello World!...为此,我们将在 HTML 中放置 100 个空 span,并使用纯 CSS 执行 FizzBu​​zz: <!...我一生中从未见过无法打印数字语言,但这就是我们到达这里方式。 好吧,让我们忽略所有这些,只制作一系列斐波那契数字大小条形图。 我们需要使用 CSS 变量而不是 CSS 数字进行计算。...CSS 变量可以访问它们父变量,而不是它们兄弟变量,所以我们需要做一些深度嵌套。...编程快速介绍,但这绝不是限制。

36021
领券