"根据ratio轻松搞定，宽度Match而需要动态计算高度的问题" 这句话可能是在描述一个使用CSS中的`width: 100`属性来设置元素的宽度为其父元素宽度的100，并且需要动态计算高度以适应内容或布局需求的场景。

在这种情况下，可以使用Flexbox（弹性盒子布局）来实现宽度匹配和高度动态计算。以下是一个简单的示例：

    

    

    Dynamic Height Example

    

        .container {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            height: 100vh; / 设置容器的高度为视口高度 /

        }

        .item {

            width: 100; / 设置子元素宽度为父元素宽度 /

            padding: 20px; / 添加内边距 /

            background-color: lightblue;

            text-align: center;

        }

    





    

        

            Content goes here...

        

    

在这个示例中，我们创建了一个名为`.container`的弹性盒子容器，并设置了其高度为视口高度（`100vh`）。然后，我们创建了一个名为`.item`的子元素，并设置了其宽度为100。这样，当内容填充到容器时，`.item`的高度将自动调整以适应内容。轻松搞定，宽度Match 而需要动态计算高度的问题。