高度百分比与底部填充百分比
[英]height in percentage vs padding-bottom in percentage
问题描述
recently I found an responsive website which changes the image contents in different size of screen. 
最近，我找到了一个响应式网站，可以在不同尺寸的屏幕上更改图像内容。 When the screen size is big like desktop computer, the content of the div is like(there is no other text content, just a div filled with an image using background-image): 当屏幕尺寸像台式机一样大时，div的内容就像（没有其他文本内容，只是一个使用background-image填充图像的div）：
#div {
background-image: url('images/pc-content01.jpg');
background: no-repeat center center;
height: 1129px;
}
When the screen size gets smaller, the css style changes like: 当屏幕尺寸变小时，css样式将更改为：
#div {
background-image: url('images/pc-content01.jpg');
background-size: cover;
height: 0;
padding-bottom: 95.5%;
}
And the background image will be swap to another image when the screen size is as small as moblie devices. 当屏幕尺寸与移动设备一样小时，背景图像将交换为另一张图像。
And my question is, how the percentage of padding-bottom is calculated, why percentage in height is not working but percentage on padding-bottom works? 我的问题是，如何计算底部填充百分比，为什么高度百分比不起作用而底部填充百分比有效？ (I understand why percentage on height is not working). （我知道为什么身高百分比无法正常工作）。
3 个解决方案
解决方案1
2 已采纳 2017-07-24 09:50:39
In padding percentages refer to the width of the containing block. 在填充百分比中，指的是包含块的宽度。 In this case is used to maintain the aspect ratio (the image one) when the width changes. 在这种情况下，当宽度变化时，用于保持纵横比（图像一）。 It is a trick often used in responsive design. 这是响应式设计中经常使用的技巧。 A box with an intrinsic ratio . 一个具有本征比的盒子 。 Percentage in height works differently 身高百分比不同
The percentage is calculated with respect to the height of the generated box's containing block...
解决方案2
2 2017-07-24 09:50:54
When using a percentage value for paddings, it always refers to the width of the element. 当使用百分比值作为填充时，它总是指元素的宽度 。 See MDN . 参见MDN 。 So in this case the padding-bottom of #div would be 95.5% of its width. 因此，在这种情况padding-bottom ， #div的padding-bottom将为其宽度的95.5％。 When setting percentage value for height it calculates it by using the height of the containing block. 设置height百分比值时，它将使用包含块的高度进行计算。 See MDN 见MDN
解决方案3
2 2017-07-24 09:52:19
Height in percentage 身高百分比
Height using percentage only works if we give height using percentage to the body and html of the page, it will not work otherwise. 仅当我们对页面的body and html给出使用百分比的高度时，使用百分比的高度才有效，否则将不起作用。
Like this- 像这样-
html, body{ height:100%; background:black; } body>div{ height:50%; background:gray; }
<body> <div>HI</div> </body>
Padding-bottom in percentage 底部填充百分比
But in the case of percentage on padding-bottom, it works irrespective to the body or HTML . 但是，对于在底部填充百分比的情况，它无论body or HTML起作用。 It only checks the width of the containing element . 它仅检查width of the containing element的width of the containing element 。
Like this - 像这样 -
html, body{ background:black; } div{ background:gray; padding-bottom:20%; }
<body> <div>HI</div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.