CSS Responsive Fluid Square (with scrollable content)

Question

So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)

In other words:

• I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).

• The div also needs to have another div inside it which can contain content and overflow: auto.

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

So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be 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 are my CSS solutions and what is wrong with them:

1. This works except it exceeds the height of the body in landscape (max-height in any of the elements does 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 I added a landscape media query to swap around the height and width values. Same problem. @media(orientation:landscape) { .wrap { margin: auto 10%; height: 70%; width: auto; } }

   Codepen

3. At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.

And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.

Any help much appreciated.

Answer 1

You can use vw, vh and vmin to scale the 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 also use vmin (which gives better results but is less well supported) and forego the 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 and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).

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