div宽高比调整大小与位置：固定

Question

我使用position: fixed在浏览器窗口的左下角放置了一个div。当用户调整窗口大小时，我希望div也调整大小，但保留原始宽高比。

仅限CSS解决方案（或确认不能单独使用CSS）。我在IE9 +工作。我会接受任何解决方案：按宽度或高度调整大小。

有很多问题（有解决方案）和我一样，但是他们似乎都没有为div使用position: fixed提供解决方案。他们的解决方案必须position: absolute，否则他们就无法工作。

编辑1：Codepen live example here。

编辑2：This是我希望它工作的方式，同时仍然使用position: fixed。

Answer 1

如果您事先知道宽高比，我并不完全清楚 - 如果是这样，您可以使用

的变体

#content:before {
content:'';
float:left;display:block;
width:0;
padding-top:80%; /*height= 80% of width */
}

可能与min-height合并#container？ （这是the accepted answer in your link的简化版本。）

Answer 2

假设您正在寻找窗口右下角有一个小div的内容，调整浏览器窗口大小会调整小方框的大小。

<强> HTML：

<div class="fixed-box">
    Something...
</div>

<强> CSS：

.fixed-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 10%;
    background-color: #ccc;
}