Fin Turner Fin Turner - 4 months ago 22
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

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>

Comments