所以我正在尝试构建一个纯粹的CSS响应方（实际上我正在尝试构建一个圆形但是一旦我得到这个方块就很容易了。）
换句话说：
我希望div height的{{1}}占body的百分比，width等于（{反之亦然）
div还需要在其中包含另一个div，其中包含内容和overflow: auto。
最后，div永远不会超过height或width的{{1}}（或body}。
到目前为止，我已经使用1px透明.gif作为viewport来部分地（即portrait而不是landscape）使用一些解决方案来填充包装{{1 }}。不理想的语义，但我不知道如果没有它可以做到这一点。
img以下是我的CSS解决方案以及它们有什么问题：
除非超出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>
的{{1}}（height，否则任何元素都无法解决此问题：
body接下来，我添加了landscape媒体查询来交换max-height和.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%;
}
值。同样的问题。
landscape
此时我开始研究height的父元素，即width和@media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}。 （Resource on the difference between them.）我向他们两人添加了.wrap和body，但没有快乐。我还尝试添加另一个html容器，因为我认为控制高度可能更容易，但这似乎也没有做太多。
现在我几乎没有选择。我很确定解决方案与height和max-height: 100%元素有关，以及它们如此渴望垂直扩展的方式，但我不确定如何阻止它们这样做。
任何帮助都非常感激。
答案 0 :(得分：8)
您可以使用vw，vh和vmin来缩放广场：
CSS（仅限更改部分）：
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
你也可以使用vmin（效果更好但支持不太好）并放弃图像：
演示：http://jsfiddle.net/r9VQs/2/
CSS：
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh，vw和vmin的单位相当于其各自视口尺寸的1％（vh是视口高度，vw是视口 - 宽度和vmin以较小的值为准。）
有关浏览器支持，请参阅http://caniuse.com/#feat=viewport-units。