响应式布局中元素高度无法随视口尺寸自适应如何解决

百分比高度的生效有前置规则：元素设置百分比高度时，所有祖先元素必须有明确的高度定义，否则百分比高度会默认由内容撑开，无法按比例计算。
现有代码存在两个问题导致高度无法随视口调整：

• 根元素<html>、<body>默认未设置高度，高度完全由内部内容撑开，没有和视口高度建立关联
• .container写死了height: 800px固定值，子元素设置的height: 19.67%永远基于800px计算，不会随窗口尺寸变化

修改CSS即可实现高度随视口自适应：

• 首先重置浏览器默认边距，给<html>、<body>设置100%高度，让文档根节点和视口高度直接绑定
• 将.container的固定800px高度替换为相对视口的单位，比如vh（1vh等于视口高度的1%），或者设置height: 100%继承父级的视口高度
• 如果需要色块保持固定宽高比（比如正方形），不需要硬写高度百分比，用aspect-ratio属性实现更灵活，不会受父元素高度限制

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>A simple float-based responsive design</title>
    <style>
      /* 重置浏览器默认边距，避免出现多余滚动条 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html, body {
        width: 100%;
        height: 100%;
      }
      .container{
          width: 100%;
          /* 替换固定高度，这里设置为视口高度的80%，可按需调整比例 */
          height: 80vh;
          border: 1px solid black;
        }

        .box1{
          width: 19.67%;
          height: 19.67%;
          background-color: orange;
          float: left;
        }
        .box2{
          width: 19.67%;
          height: 19.67%;
          background-color: blue;
          float: right;
        }
    </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

如果不需要高度和视口高度绑定，而是希望色块宽度随窗口变化时、高度自动和宽度保持一致（比如始终为正方形），可以删除.box1和.box2的height属性，添加aspect-ratio: 1 / 1;即可，这种写法不依赖父元素高度，适配逻辑更简单。

内容的提问来源于stack exchange，提问作者Anjali Mittal