Googled - did not help, googled in English - did not help either, came to the good old Stackoverflow. So, immediately to the point. The layout structure is as follows:

<div class="header"> <div> <h1>Hello world</h1> </div> <div> <img style="height: 100%"> </div> </div>

I'm trying to get the height .header most ordinary

 console.log( $('.header').height() );

And here is the most interesting thing: if I insert this function into the usual <script> inside the $(document).ready(function () {}); , then the value greater than real is displayed in the console. If I enter the above code into the browser console after the page has loaded, it gives a valid one.

As a result of a long googling, I found out that this is a feature caused by the line-height , which, as I understand it, is calculated after the DOM is ready. And the fact is that my font is connected, everything works properly on the default Helvetik. The task , as I understand it , is to call this function after rendering line-height . And to confirm the source of the problem, I decided to equate line-height to 0 , and voila - everything also works. Help. I hope lucidly described the problem.

  • Something tells me that the problem is in the picture, which is inside the .header block, and not in the line-height . Try to give it a fixed height in pixels via the height attribute, or simply delete it. - neluzhin
  • @terron unfortunately has already tried, and did not help ( - igolka97
  • Then try thrusting the block size count not in $(document).ready(function () {/* ... */}); , and in window.onload = function() { /* ... */ }; - only works when all assets, including your font, are loaded. - neluzhin
  • one
    @ igolka97 "That is a lucid, intelligent, well thought-out question." - Judge Chamberlain Haller "My Cousin Vinny". I regret that I can vote for your question only once. - Igor
  • @terron is amazing how far the answer can be on the surface - and how I didn’t think of it myself. Please make your comment a response and I will mark it as a solution. - igolka97

1 answer 1

For images, so that the layout does not "skip", you should specify the fixed dimensions through the width and height attributes.

Also, if you use plug-in fonts, then you should wait until they are fully downloaded. The one you are using $(document).ready(function () {/* ... */}); only works when DOM is fully loaded, which does not guarantee loading assets (fonts, styles, images, etc.) and i-frames.

To achieve the desired result in two ways:

 window.addEventListener('load', function () { /* ... */ });

... or ...

 window.onload = function () { /* ... */ };

The first option is preferable at least because the page will create many events that trigger the page loading, while the second option can be used only once. If you want to weigh the pros and cons of both approaches in more detail, I recommend reading the answer to this question: addEventListener vs onclick