CSS Адаптивный Square Fluid (с прокруткой контента)

Question

Так что я пытаюсь построить чистый CSS отзывчивый квадрат (ну на самом деле я пытаюсь построить круг, но это легко, как только у меня есть квадрат.)

другими словами:

• Я хочу div, который имеет height который процент от body и width, которая равна (или наоборот).

• div также нуждается в другом div внутри него, который может содержать контент и overflow: auto.

• Наконец, div никогда не может превышать height (или width) из body или viewport.

До сих пор у меня есть какое-то решение, работающее частично (т.е. в portrait, но не landscape) с помощью 1px прозрачного .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> 

Вот мои 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 «s, а именно body и html. (Resource on the difference between them.) Я добавил height и max-height: 100% к обоим, но без радости. Я также попытался добавить еще один контейнер div, поскольку, по-моему, было бы легче контролировать высоту, но это, похоже, тоже мало.

И теперь у меня практически нет вариантов. Я уверен, что решение связано с элементами и 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/

УС:

.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 для поддержки браузера.