Fin Turner Fin Turner - 1 year ago 93
CSS Question

Setting CSS based on a Percentage of Window Height

I am very new to JavaScript and jQuery and have probably made a simple mistake so please bear with me.

I have a div that fills the window height but I would like my h1 element to be 28% of the window height down the page(padding)

$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('.fullscreen').css('min-height', windowHeight);
};

function imageAjust() {
var ajustAmt = windowHeight * 28 / 100;
$('.fullscreen').css('padding-top', ajustAmt + 'px');
};
});


edit: added the px code at the end of the ajustAmt

Thanks in advance for helping

Answer Source

You can achieve the effect you want using only css if you apply height:100% to html and body tags. Obviously the div with the class "fullscreen" must be a direct children of body or a children of another element with height: 100% and children of body

html,
body {
  height: 100%;
}

.fullscreen{
  height: 100%;
  padding-top: 28%;
}
<div class="fullscreen"></div>