css - CSS Responsive Fluid Square（带有可滚动内容）

Question

所以我正在尝试构建一个纯 CSS 响应式正方形（实际上我正在尝试构建一个圆形，但是一旦我有了正方形就很容易了。）

换句话说：

我想要一个divaheight是 a 的百分比body并且 awidth等于那个（反之亦然）。
div还需要在其中有另一个可以div包含内容和overflow: auto.
最后， thediv永远不能超过 or 的height( or width) 。bodyviewport

到目前为止，我已经使用 1px 透明 .gif 作为填充 wrapper的一些解决方案部分工作（即在portrait但不工作）。不是理想的语义，但我看不出没有它怎么办。landscapeimgdiv

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

这是我的 CSS 解决方案以及它们有什么问题：

这有效，除非它超过了heightin 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; } }

密码笔
此时我开始研究.wrap的父元素，即bodyand html。（关于它们之间差异的资源。）我添加了height和max-height: 100%它们两个，但没有快乐。我还尝试添加另一个div容器，因为我认为控制高度可能更容易，但这似乎也没有多大作用。

现在我几乎没有选择。我相当确定解决方案与htmlandbody元素以及它们如此渴望垂直扩展的方式有关，但我不确定如何阻止它们这样做。

非常感谢任何帮助。

score 8 · Accepted Answer

您可以使用vw,vh和vmin来缩放正方形：

演示：http: //jsfiddle.net/r9VQs/

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了解浏览器支持。

css - CSS Responsive Fluid Square（带有可滚动内容）

1 回答 1

Related

Reference