为什么html，body {height 100％}会同时影响宽度和高度，而宽度100％仅影响宽度？

Question

Given the following code, why does html,body {height:100%} allows the image to be responsive (allows measurements of its children to be written in percentage + works) at both height and width properties, but html, body{width:100%} only allows width to be responsive? 给定以下代码，为什么html,body {height:100%}允许图像在height和width属性下都响应（允许子级的度量值以百分比+形式写），但是html, body{width:100%}仅允许宽度响应？ If you could go in bit of detail how the browser treats width/height:auto (which I believe is the default value if nothing is selected), that would be great! 如果您可以详细介绍浏览器如何处理width / height：auto（我相信如果未选择任何内容，则默认值为默认值），那就太好了！

JSBin: https://jsbin.com/dafejayasi/edit?html,output JSBin： https ：//jsbin.com/dafejayasi/edit ？ html，输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
 <style>

    html, body{
  height: 100%;
  margin:0;
  padding:0;
  }

  .image{
  height:40%;
  width:50%;
  }
  </style> 
<body>
  <img class = "image" src="http://www.placehold.it/700x300" alt="Image of storefront">
</body>
</html>

Answer 1

by doing body's or html's width 100% or height 100% or both in together does not effect on anything on the body in this case ! 在这种情况下，将body或html的宽100％或高度100％或两者合计不会对身体上的任何东西造成影响！

Now given code will give you a brief understanding about how percentage works in browser 现在给出的代码将使您简要了解百分比在浏览器中的工作方式

 .image{
        width:100%;
        //height not mention! 
}

in this case browser will select the height auto , that means the actual height of the image. 在这种情况下，浏览器将选择高度auto，即图像的实际高度。 when only if width change then height will change according to the the width. 仅当宽度变化时，高度才会根据宽度变化。 if width goes bigger height will goes bigger . 如果宽度变大，高度变大。 nothing matters if only height changes 只要高度改变就没关系

.image{
        height:100%;
        //width not mention
       }

now exact opposite case will be happen of above ! 现在上面将发生完全相反的情况！

.image{
          width:100%;
          height:100%;
         }

here if width changes it will not effect on height and vice versa ! 如果宽度发生变化，则不会影响高度，反之亦然！ thanks! 谢谢！

为什么html，body {height 100％}会同时影响宽度和高度，而宽度100％仅影响宽度？

问题描述

1 个解决方案

解决方案1
0 2016-09-03 03:24:18

为什么html，body {height 100％}会同时影响宽度和高度，而宽度100％仅影响宽度？

问题描述

1 个解决方案

解决方案1 0 2016-09-03 03:24:18

解决方案1
0 2016-09-03 03:24:18