CSS响应流体广场(可滚动内容)

Question

所以我正在尝试构建一个纯粹的CSS响应广场(实际上我正在尝试建立一个圆圈,但是一旦我得到这个广场就很容易了.)

换一种说法:

• 我想要一个div有height百分之一的bodya和一个width等于那个(反之亦然).

• 将div还需要有另一div里面可以包含的内容和overflow: auto.

• 最后,div永远不能超出height(或width)的body或viewport.

到目前为止,我已经使用1px透明.gif作为填充包装器的部分解决方案(即portrait但不是landscape).不理想的语义,但我不知道如果没有它可以做到这一点.imgdiv

<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解决方案以及它们有什么问题:

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%;  
   }
   

   Codepen

2. 接下来,我添加了一个landscape媒体查询来交换height和width值.同样的问题. @media(orientation:landscape) { .wrap { margin: auto 10%; height: 70%; width: auto; } }

   Codepen

3. 此时我开始研究.wrap父元素,即body和html.(资源对它们之间的区别.)我加了height和max-height: 100%他们两个,但没有喜悦.我也尝试添加另一个div容器,因为我认为控制高度可能更容易,但这似乎也没有做太多.

而现在我几乎没有选择.我很确定解决方案是html与body元素和它们如此渴望垂直扩展的方式有关,但我不确定如何阻止它们这样做.

任何帮助非常感谢.

Answer 1

您可以使用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.