Resize div width as browser height is changed using CSS

Question

Have been searching for a few days for a CSS only solution to maintaining aspect ratio of a div. The important part is that the div height should be as the browser window height (without scrolling and without hiding overflow), and the width percentages should adjust to keep the aspect ratio correct. Everything I've found so far (mostly the padding trick) uses the parent element's width to maintain aspect, and adds a lot of extra space below the div, especially in full screen on large displays.

Really trying to avoid javascpript.

Here is my basic setup:

::Edit:: added link to jsfiddle -- http://jsfiddle.net/SUbYB/ ::Edit 2:: just using jQuery to handle set width of div based on height. Thanks all!

stylesheet

body, html{
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}
.super-container{
    position: relative;
    width: 69.8%;
    height: 95%;
    max-width: 2008px;
    margin: 0 auto;
    padding: 0 15.1% 0 15.1%;
    background: rgba(200,200,200,.2);
}
.aspect-container{
    position: relative;
    display: block;
    height: 95%;
    margin: 0 auto;
    background: rgba(200,200,200,.4);
}
.aspect-critical-content{
    position: absolute;
    top:0; right: 0; bottom: 0; left: 0;
    background: rgba(200,0,0,.2);
}

and html

<html>
<head>
</head>

<body>

<div class="super-container">
     <div class="aspect-container">

         <div class="aspect-critical-content">
         </div>

     </div>
</div>

</body>
</html>

Thanks for any help in advance!

you could try to use calc, if cross-browser is not too important for you: https://developer.mozilla.org/en-US/docs/Web/CSS/calc?redirectlocale=en-US&redirectslug=CSS%2Fcalc — hugo der hungrige, Nov 11 '13 at 03:19
I would also recommend having a look at my own question. There was some useful input there, although no good solution: http://stackoverflow.com/questions/15824709/how-to-make-a-flexible-square-fit-to-either-height-or-width-of-the-window-with-p — hugo der hungrige, Nov 11 '13 at 03:21
The only other pure css solution - i can think about, is to use break-points for max-height. but this probably not what you want. — hugo der hungrige, Nov 11 '13 at 03:26
Thanks hugo, good stuff there. Looking more and more like this is something that can't be done with *just* css — Jeffrey_0100101001100101011001, Nov 11 '13 at 03:28

Agat · Answer 1 · 2013-11-10T00:53:26.607

0

What's about just using:

display: table;
display: table-row;
display: table-cell;

That would look like in your case (additionaly to your code):

.aspect-container{
    display: table-row;
}
.aspect-critical-content{
    display:table-cell;
    height:100%;
}

.aspect-container2{
    display:table-row;
    height:100px;
}

and html:

<div class="super-container">
  <div class="aspect-container">
    <div class="aspect-critical-content">
      some text
    </div>
  </div>
  <div class="aspect-container2">
    <div>
      text2
    </div>
  </div>
</div>

The second row I've added just to show how you can easily to play with height of another block within the same container.

The code on plunker.

edited Nov 10 '13 at 00:53

answered Nov 10 '13 at 00:31

Agat

4,577
2
34
62

tried this, but the aspect container (and children) won't resize to the correct width as the height decreases or increases. – Jeffrey_0100101001100101011001 Nov 11 '13 at 02:37
Not sure I follow how is the height is related to the width in your comment. – Agat Nov 11 '13 at 02:40
Currently, in every solution I've tried, the height of the div will adjust as the width of the browser is changed. I need the width of the div to adjust as the height of the browser is changed. – Jeffrey_0100101001100101011001 Nov 11 '13 at 02:48
Sorry, to adjust to what? – Agat Nov 11 '13 at 02:56
... to adjust to whatever length maintains the aspect ratio, without exceeding the borders of the browser window (never scroll). – Jeffrey_0100101001100101011001 Nov 11 '13 at 03:12
The sample code I've provided is just all about managing height problem. Width(s) usually do not have similar problems and generally are straight forward to manage. (I was just expecting you are easily able to to that with something like 'width:100%'). If you still experiencing certain problems with scroll bars appearing, that might be just because of some nuances with your own implementation. (Be sure also, that your `body` tag has padding:0; margin:0; properties set up). – Agat Nov 11 '13 at 03:18

score 0 · Answer 2 · answered Nov 11 '13 at 03:09

0

You can use this css-technique:

.aspect-container {
  width: 100%;
  height: 0;
  margin: 0 auto;
  /* this is a aspect ratio of 1:3 */
  padding-top: 33.33%;
  position: relative;
}

.aspect-critical-content {
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

The value of padding-top to the base of 100 is the aspect ratio.
Fiddle: http://jsfiddle.net/mE4qG/

answered Nov 11 '13 at 03:09

hugo der hungrige

12,382
9
57
84

thanks, but padding and margin draw their values from the width of the parent element. I need the height of the window/parent element to be the driving factor in setting the size of .aspect-critical-container. It's looking more and more like this is not just a CSS solution. – Jeffrey_0100101001100101011001 Nov 11 '13 at 03:19

Resize div width as browser height is changed using CSS

2 Answers2