CSS响应流体方形（具有可滚动内容）

因此，我试图构建一个纯CSS响应的正方形（实际上，我试图构建一个圆形，但一旦我得到了正方形，这很容易。）

换言之：

• 我想要一个

  div

  ，它的

  高度等于
  主体的百分比，宽度等于这个百分比（反之亦然）
  

• div

  内部还需要另一个

  div

  ，它可以包含内容和

  溢出：auto

• 最后，

  div

  不能超过

  主体

  或

  视口

  的

  高度

  （或

  宽度

  ）

到目前为止，我已经找到了一些部分有效的解决方案（即在

纵向

中，而不是

横向

），使用1px transparent.gif作为

img

填充包装器

div

。这不是理想的语义，但我不明白没有它怎么能做到这一点

<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
    <main>
        <div class="content">
            <h2>Title</h2>              
            <p> Lorem... etc. </p> 
         </div> 
     </main>
</div>

接下来，我添加了一个

横向

媒体查询来交换

高度

和

宽度

值。同样的问题。

@媒体（方向：横向）{
.包裹{
利润率：10%；
身高：70%；
宽度：自动；
}
}

此时，我开始研究

.wrap

的父元素，即

主体

和

html

。（）我把

height

和

max height:100%

添加到了这两个词中，但没有乐趣。我还尝试添加另一个

div

容器，因为我认为它可能更容易控制高度，但这似乎也没什么作用

现在我几乎没有选择了。我相当肯定解决方案与

html

和

body

元素以及它们如此渴望垂直扩展的方式有关，但我真的不确定如何阻止它们这样做

---

非常感谢您的帮助。

您可以使用

vw

、

vh

和

vmin

缩放正方形：

演示：

CSS（仅更改部分）：

您还可以使用

vmin

（这会提供更好的结果，但支持程度较低）并放弃图像：

演示：

CSS:

vh

、

vw

和

vmin

是相当于各自视口尺寸1%的单位（

vh

是视口高度，

vw

是视口宽度，

vmin

是数值较小的单位）

---

有关浏览器支持的信息，请参见。

先生，您是一位英雄。非常感谢。特别是对于caniuse链接。出于兴趣，不相关-为什么您更喜欢使用JSFIDLE到codepen？实际上我一直使用codepen，但对于演示来说它有点太“重”。如果你感兴趣的话，我在那边。

.wrap {
  background: blue;
  margin: 10% auto;
  width: 70%;
  position:relative;
  text-align:center;
}
.wrap img {
  border: 1px solid black;
  height: auto;
  width: 100%;
}
main {
  background: red;
  display: block;
  border-radius:50%;
  height: 100%;
  width: 100%;
  position: absolute;
  top:0
}

main div {
  background: green;
  overflow: auto;
  display:inline-block;
  height:70%;
  width: 70%;
  margin-top:15%;  
}

.wrap {
    background: blue;
    margin: 0 auto;
    max-width: 90vh;
    max-height: 90vh;
    position:relative;
    text-align:center;
}

.wrap {
    background: blue;
    margin: 0 auto;
    width: 90vmin;
    height: 90vmin;
    position:relative;
    text-align:center;
}