Task: the script determines the height of the block, depending on the presence of the absence of another body. I used the following option:

$("document").ready(function(){ if(window.innerWidth > 500){ if ($(".block").length) { $('#div1').css("height", "calc(100vh - 40px)"); $('#div2').css("height", "calc(50vh - 40px)"); } else { $('#div1').css("height", "100vh"); $('#div2').css("height", "50vh"); } } });

The browser displays only the value of else. What is the problem? HTML:

 <body> <div class="block"></div> <div id="div1(или div2)"></div> </body>
  • quiz? Not enough html. - Igor
  • No, of course) All three blocks are in the root of the body. Div1 and div2 - blocks with different pages, so <body> <div class = "block"> </ div> <div id = "div1 (2)"> </ div> </ body> - Maxim Radziuk
  • Add your HTML code, JS code is working fine. - Daniel
  • @MaximRadziuk You, by chance, did not forget to wrap it in $(window).resize(function(){...}); ? - Igor
  • 2
    $("document") not necessary to write in "" - quotes. - And

2 answers 2

Most likely, browsers do not understand this construction in the attribute

  calc(100vh - 40px)

Try the following code:

 $("document").ready(function(){ if(window.innerWidth > 500){ var screenHeight = $(window).height(); var heightForDiv1 = (screenHeight - 40) + 'px'; var heightForDiv2 = (screenHeight/2 - 40) + 'px'; if ($(".block").length) { $('#div1').css("height", heightForDiv1); $('#div2').css("height", heightForDiv2); } else { $('#div1').css("height", "100vh"); $('#div2').css("height", "50vh"); } } });

If it does not work, then, apparently, an error in the selector that you are looking for in the second condition: ".block". I have nothing against any names in other people's projects, but does an element really have a "block" class?))

Or, at the time of the script development $ (". Block") does not exist yet (this collection, for example, appears dynamically).

Upd:

 calc(100vh - 40px)

It works fine.

  • Thank you, classes have a different name in the project, I picked it up here for simplicity. Browsers design the display in other places correctly, on the page there are another 6-7 blocks with width and height that use calc. Somewhere in 2-3 hours, a software programmer will answer me, maybe he is messing about. - Maxim Radziuk
  • There is an error on the client. Make a breakpoint at checking the condition $ (". Block"). Length, and see what is in the console. - Vlad Volkov
  • My condition works. Apparently the problem is in the prgrammmist. I will wait until I get in touch, we'll see there ... Thank you) - Maxim Radziuk

Your example works fine.

 $(document).ready(function(){ if(window.innerWidth > 500){ if ($(".block").length) { console.log('Условие срабатывает.'+' calc(100vh - 40px) и calc(50vh - 40px)'); $('#div1').css("height", "calc(100vh - 40px)"); $('#div2').css("height", "calc(50vh - 40px)"); } else { console.log('Условие НЕ срабатывает. '+'height, 100vh и height, 50vh'); $('#div1').css("height", "100vh"); $('#div2').css("height", "50vh"); } } }); 
 #div1 { background-color: rgb(244, 128, 36); color: white; font-weight: bold; padding: 10px; } #div2 { background-color: #45a163; color: white; font-weight: bold; padding: 10px; } .block{ text-align:center; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="block"> DIV BLOCK </div> <div id="div1">DIV - 1 </div> <div id="div2">DIV - 2 </div> </body> </html>