CODEWITHSUNDEEP
javascriptjquerycssheightpercentage
Fin Turner
Fin Turner

Reputation: 3

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

Upvotes: 0

Views: 1013

Answers (1)

therealbischero
therealbischero

Reputation: 224

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>

Upvotes: 0

Related Questions