Keep responsive/fluid grid contents contained within viewport size at all times

Question

I want to create a responsive/fluid grid which has 2 rows of content .tier1 and .tier2. The contents should always fit inside the dimensions of the viewport with .tier1 occupying 60% of the height and .tier2 the remaining 40%. At the moment I'm not sure what the best approach to this is, using javascript I could keep an eye on the viewport dimensions and set a height so that the .tier containers applied % heights take effect but I was wondering if I can just do this using CSS?

CSS

.content1 {
    height: 60%;
}
.content2 {
    height: 40%;
}

HTML

<div class="container">
    <div class="tier">
        <div class="content content1">
            <img src="http://dummyimage.com/600x400/000/fff">
        </div>
    </div>
    <div class="tier">
        <div class="content content2">
            <img src="http://dummyimage.com/600x400/dedede/fff">
        </div>
    </div>
</div>

Fiddle http://jsfiddle.net/EK6QT/1/

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Depending on what browsers you need to support (CanIUse... reference), you could always introduce CSS3 Viewport Relative Lengths.

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

So for your example, rather than using %, simply use vh:

.content1 {
    height: 60vh;
}
.content2 {
    height: 40vh;
}

JSFiddle demo.

If you want more in-depth detail surrounding what these are, I have another answer here which discusses these: https://stackoverflow.com/a/16837667/1317805

edited May 23 '17 at 12:05

Community

1
1

answered Oct 16 '13 at 21:42

James Donnelly

126,410
34
208
218

Hi, thanks for the reply. I've been trying to implement the units in the following fiddle http://jsfiddle.net/V2YZA/1/ but my problem is that the heights are now set and don't scale up or down nicely, instead they remain at the set height of 60 or 30 etc? – styler Oct 16 '13 at 22:03
like scaling up or down the main large black area always stays at the same height which is 290px for me – styler Oct 16 '13 at 22:05
I'm not sure what you mean, this is scaling fine for me if I resize the JSFiddle result area. Your `height:x%` declarations will not work as there is nothing for them to scale to - their containers would also need absolute heights or heights relative to absolute heights. Changing these to `px` values gives a noticeable change. – James Donnelly Oct 16 '13 at 22:08
my problem is i dont get that fluid feel when i resize down as the height doesnt seem to reduce based on the viewport size, height seems to stay fixed at a certain size – styler Oct 16 '13 at 22:14

Keep responsive/fluid grid contents contained within viewport size at all times

1 Answers1