【钟楚炯的回答:为什么高度和宽度设置成一样的百分比,总是出不来应该有的效果? _布局 _内外边距 _盒子模型概念 】 | IT修真院·坑乎
问题已收录 为什么高度和宽度设置成一样的百分比,总是出不来应该有的效果?
我也踩过这个坑( 4 )
已统计您的踩坑,无需重复点击
回答(5)
布局 内外边距 盒子模型概念
详细描述
截图
代码
编辑于2024-10-10
[深圳|结业弟子]JS-钟楚炯

高度height的百分比相对于父元素的高度,父元素默认是没有高度的 。如果不给父元素一个高度,子元素也不会有高度。在普通文档流中,块级元素的宽度默认是浏览器的宽度,因此百分比有效。也就是为什么子元素有宽度而没有高度。padding-bottom 和padding-top 的百分比是相对于父元素的宽度,而不是高度。因此设置了padding-top 或者padding-bottom 百分比的子元素,其高度就不再依赖于父元素高度了。由于padding-bottom 和padding-top 的百分比是相对于父元素的宽度,当屏幕大小出现变化时,元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。

编辑于2019-11-24
  • [上海|荣耀师兄]JS-杨亚洲
    0

    百分比宽度和百分比高度表现不一样,是与浏览器的渲染机制有关。

    Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。

    如果你不设置块级宽度值,那浏览器会自动将页面内容平铺填满整个横向宽度。(即块级元素的宽度),此时widh:auto.

    但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

    因为页面根元素的html元素的高度为auto(实际上为0),body的height也为0,所以,当你让一个元素的高度设定为百分比高度时,父级的高度如果是auto,那你的子级设置%高度,就无法取到实际值。

    因为父级元素的高度是由该元素里面的内容撑起的,在不设置该圆素高度的前提下。
    于是子元素的高度height: 50% 也不会起作用。解决办法就是给html和body加上height: 100%。

    如果 你非得想叫子级用height,那么你可以设置父级的height:100vw,即父级高度是屏幕的宽度,从而实现百分比自适应,

    至于padding-top或padding-bottom为什么起作用,上面的师兄已经解释了,我就不赘述了。

    编辑于2018-03-29
  • [外门弟子]CSS-11
    0

    点赞

    编辑于2018-07-21
  • [无名弟子]JS-柳桐
    0

    如果使用百分比的话这个div的宽和高都是根据它的父级元素来决定的,它的父级元素的宽和高不同,所以这个div的宽和高就不一样,你尝试这用vw试一下。

    编辑于2018-11-02
  • [真传弟子]JS-陈振华
    0

    你可以尝试一下页面百分比。VW或者VH

    编辑于2019-11-11