CSS 属性 width:100%相对于父元素的哪部分计算?

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 3134 days ago, the information mentioned may be changed or developed.

普通状态下,似乎相对于父元素宽度计算

子元素加上 position:absolute 后,变成相对于父元素的 width + padding 了?

[示例]( http://htmlpreview.github.io/?https://github.com/Aaron-Bird/baiduIFE/blob/master/note/width100%25.html)

Supplement 1 · Nov 12, 2017

https://css-tricks.com/almanac/properties/w/width/#article-header-id-0
For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.

width

元素

absolute

padding

1 replies

Nov 12, 2017

这是两个问题了。
一、默认状态下 width 100% 是相对于父元素的可用宽度，不含 padding。
二、加了 absolute 之后元素变成了绝对定位，会一直向上寻找第一个非 static 的父元素（例如其它的 absolute 或 relative ），如果上级元素中都没有，那就是相对于 body 了，所以这时候搭配 width 100% 的话就是占据整个视图区域的宽度了。