Set height of div in pixels based off width of browser window in % (jQuery or JS?)

Question

I am trying to set up a black border around a webpage. For the left and right side, just making "width: 5%;" in the CSS is fine. But then I want JS/jQuery to work out how many pixels that is, and make that the height of the top and bottom div.

Is this possible?

Thanks.

Answer 1

This should work for you

var val = $(".leftAndRight").width();
$(".topAndBottom").height(val);

Or with one line:

$(".topAndBottom").height($(".leftAndRight").width());

Answer 2

You can determine the value for the border width programmatically, assign it to all four borders, and also refresh it any time you resize:

var width,
    drawBorder = function () {
        var body = $('body'),
            width = body.width() * 0.05;
        body.css('border-width', width + 'px');
    };

drawBorder();

$(window).resize(function () {
    drawBorder();
});

Demo

If you set the left and right width in your stylesheet and then use JS to give the same border width to the top and bottom, unless you use a resize function your left and right borders will change every time you resize but your top and bottom borders will remain fixed.

Answer 3

You can use .width() to find width without the border and .outerWidth to find the width including the border. I think .outerWidth also gives you the width with the padding you may have to subtract that.