css3 - CSS Responsive Fluid Square (with scrollable content) -

so i'm trying build pure css responsive square (well i'm trying build circle that's easy once i've got square.)

in other words:

• i want div has height percentage of body , width equal (or vice versa).

• the div needs have div inside can contain content , overflow: auto.

• lastly, div can never exceed height (or width) of body or viewport.

so far, have got solutions working partially (i.e. in portrait not landscape) using 1px transparent .gif img fill out wrapper div. not ideal semantics don't see how can done without it.

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

here css solutions , wrong them:

1. this works except exceeds height of body in landscape (max-height in of elements not solve this):

   .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. next added landscape media query swap around height , width values. same problem. @media(orientation:landscape) { .wrap { margin: auto 10%; height: 70%; width: auto; } }

   codepen

3. at point started looking .wrap's parent elements , namely body , html. (resource on difference between them.) added height , max-height: 100% both of them, no joy. i've tried adding div container thought might easier control height, doesn't seem doing either.

and i'm pretty out of options. i'm sure solution html , body elements , way eager expand vertically i'm not sure how else stop them doing so.

any appreciated.

you can use vw, vh , vmin scale square:

demo: http://jsfiddle.net/r9vqs/

css (changed part only):

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

you can use vmin (which gives better results less supported) , forego image:

demo: http://jsfiddle.net/r9vqs/2/

css:

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

vh, vw , vmin units equivalent 1% of respective viewport dimensions (vh viewport-height, vw viewport-width , vmin whichever has smaller value).

please see http://caniuse.com/#feat=viewport-units browser support.