html - css 在浏览器窗口中显示 block 高度变化

Question

我将用一个例子来描述我的问题:假设我们用 css 绘制一个 block ，我们可以看到当水平拖动浏览器窗口时 block 的宽度会改变，直到达到其最小宽度。现在我希望它对 block 的高度做同样的事情，它不起作用，这是我遇到的问题。有帮助吗？

这是我的示例代码:

#block {
    margin: auto;
    margin-top: 100px;
    display: block;
    border: 2px solid grey;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 30px 40px;
    background-color: rgba(148, 148, 148, 0.15);
    color: #fff;
    box-shadow: 0 0 5px #bab9b9;
    -moz-box-shadow: 0 0 5px #bab9b9; /* Firefox */
    -webkit-box-shadow: 0 0 5px #bab9b9; /* Safari, Chrome */
}

Answer 1

你可以添加

padding-top:50%

到您的 block css，高度会随着您调整浏览器的宽度而变化。我只在 FF 上测试过这个，所以我不知道它是否适用于其他浏览器，我不能 100% 确定这是否是你要找的东西