Question 259528 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to properly calculate window screen height to fit an element inside a div?

I am attempting to set the height for #blue_square inside the divTwo div . I’m calculating the height using jquery:

$("#blue_square").css("top", $(window).height() / 2 - 90)

This code works on big screens(like desktop) but on smaller screens (like laptop,tablet, mobile) this code does not work.

The problem I am seeing is that my blue_square CSS from divTwo is somehow starting on from blueBackground div. Here is a snap shot: example 1

I want the CSS for #blue_square to only apply within the divTwo not outside of it. Why is the "blue sqaure" diagram starting on blueBackground and not from within divTwo? I am trying to make it look like this: example 2 .

I am thinking that I am miscalculating the height of #blue_square. Any ways to fix this?

<div class="blueBackground"></div>

<div class="divTwo">
    <div class="col-md-12 col-sm-10">   
        <div id="blue_square" style="top: 310px;"></div>
    </div>   
</div>


.divTwo{
    position: relative;
}

#blue_square{
    position: fixed;
    right: 0;
    z-index: 9;
    width: 370px;
    box-shadow: 0 0 6px transparent;
}

$("#blue_square").css("top", $(window).height() / 2 - 90)
Tags:

2

Answers


  1. 0

    looks like your usage of fixed position for #blue_square could be why the #blue_square is starting from top of blueBackground div not of the divTwo div

    but you can try using this jQuery .height() method to get the height of the div and then use the .css() method to set the height of the element based on that value.

    there you go:

    var divHeight = $('.divTwo').height();
$('#blue_square').css('height', divHeight);

    This will set the height of the #blue_square to match the height of the divTwo div.

    Login or Signup to reply.
  2. 0

    You could use this calculation:

    const blueTop = $(".blueBackground").height() + $(window).height() / 2 - 90;
$("#blue_square").css("top",  blueTop);

    However, if the blue background is as large, or larger, then the window it will not show the blue block at all. If you want the blue block to appear after the user starts scrolling past the blue background you will need to use Javascript for that. (example)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search