CODEWITHSUNDEEP
javascripthtmlcsslayout
Brian Espinosa
Brian Espinosa

Reputation: 48

CSS (or JS) set height of div and have the width be equal to make a squares

Not sure why but I am having a hard time trying to put this into a readable question but here goes.

I am trying to figure out a way to have two stacked square div's that fill the browser's height. I have searched and found a lot of ways to keep the div's square based on width but can not seem to find anything based on viewport height.

What I have so far : http://codepen.io/jointmedias/full/mxlLC

Basically, from the above example, I need the red and purple div's to always be square no matter what the height or width of the browser is.

Anyone got any tips? Thanks in advanced.

Brian

Upvotes: 1

Views: 448

Answers (4)

Fabrício Matté
Fabrício Matté

Reputation: 70139

CSS only solution:

.side-top, .side-bottom {
    width: 50vh;
    height: 50vh;
}

Demo

vh is a viewport height percentage unit, part of CSS3 Values and Units.

Support for Viewport CSS units is pretty good nowadays, see the support table.

In case you need to support IE<=8 and android stock browser, you will need a JS fallback.

Upvotes: 3

Terry
Terry

Reputation: 66103

Here is a simple jQuery-based solution that I have came up with (http://codepen.io/terrymun/pen/nEDoA):

$(function() {
  var $w = $(window);

  $w.resize(function() {
    $(".side-content > div")
      .height($w.height() * 0.5)
      .width($w.height() * 0.5);
    $(".main-content")
      .width($w.width() - $w.height() * 0.5);
  }).resize();
});

The logic behind the function is simple - firing the .resize() event when the DOM is ready (thus the chaining), and also listening to the .resize() event. I have assigned the jQuery object $w to $(window) to simplify things.

Hint: It might be a good idea to throttle the .resize() event, because in some browsers the event gets fired too often, and may hamper the performance of your site upon resizing.

I have also taken the liberty to simplify your CSS a little more:

.side-content > div {
  position: absolute;
  right: 0;
}
.side-top {
    background: red;
}
.side-bottom {
    background: purple;
    top: 50%;
}

Upvotes: 0

mohas
mohas

Reputation: 1931

Well Html and browsers are very bad at element heights (heights that are not specified in pixels, cm...), why not consider using javascript? you can do this easily with jquery:

$(window).resize(function () {
            //perform any resize logic here
            //I use timeout logic here so that the resizing function does
            //not repeat so many times and consume more resources than it should
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(adjustNews, 100);
        });
function adjustNews() {
        $('.yourTwoElementsByClass').css({ width: $(this).height() + "px" });
    };

Upvotes: -1

Rengers
Rengers

Reputation: 15218

It's not possible to do this with pure CSS. You will have to create a Javascript function that:

  • Is called when the browser viewport is resized
  • Retrieves the height of one of the two blocks
  • Sets the width of the blocks to the retrieved height

You can also set the height of the blocks using Javascript, but you already have that fixed using CSS.

Upvotes: -1

Related Questions