Question

我将用一个例子描述我的问题：假设我们用css绘制一个块，我们可以看到水平拖动浏览器窗口时的效果，块的宽度将会改变，直到达到最小宽度。现在我希望它与块的高度相同，它不起作用，这是我有问题。有什么帮助吗？

这是我的示例代码：

#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%

到您的块css，当您调整浏览器的宽度时，高度会发生变化。我只在FF上测试了这个，所以我不知道这是否适用于其他浏览器，我不是100％确定这是否是你想要的

Answer 2

如果没有Javascript，我认为你不能这样做。

Answer 3

我对你的问题感到困惑。您尚未在块上设置任何min-width。你想要达到什么目标 - 一个100％高度的窗户？

Answer 4

我会说不，因为我认为你的意思是改变了左边和右边。由于高度通常高于窗口高度，因此高度不会像预期的那样起作用。

如果你的身高有限，也许它可以奏效，但我从未尝试过。我不认为margin-top: auto; margin-bottom: auto;与margin-left: auto; margin-right: auto;

具有相同的效果

所以...正如所建议的......如果你想要这个效果，那就用JS代替

css在浏览器窗口中显示块高度更改

4 个答案: