improve the tip for what to do when sticky is not working as intended

app/web_development/tutorials/next-js-static-mdx-blog/table-of-contents-plugin/page.mdx

@@ -214,7 +214,15 @@ Lines 219 to 212: as the toc consists of `<ul>` and `<li>` list elements but we
 Lines 223 to 225: because by default browsers add padding to an `<ul>` element which we remove, but we use the [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) pseudo class only to target the first `<ul>` element (the other child `<ul>` elements need to keep their padding as this is used to create the stairs effect for the heading links)
 
 > [!TIP]  
-> If you have trouble making the [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) **sticky** work, know that when using **position sticky** 2 things are essential to make sure it works, the 1st one is that the parent element should NOT have an **overflow** set (like for example `overflow: auto`) and the 2nd one is that you need to make sure you also specify at least one of the 4 properties **top**, **left**, **right** or **bottom**, for example in the example above if we remove the **top** property then the `<nav>` element wouldn't be sticky anymore
+> If you have trouble making the [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) **sticky** work, know that when using **position sticky** 3 things are essential to make sure it works
+>  
+> the 1st one is that the **parent** element should NOT have an **overflow** set (like for example `overflow: auto`)
+>  
+> the 2nd one is that you need to make sure you also specify at least one of the 4 properties **top**, **left**, **right** or **bottom**, for example in the example above if we remove the **top** property then the `<nav>` element wouldn't be sticky anymore
+>  
+> the third one that is important is that you don't set the height of element that you want to be sticky to 100%, you need to define a height, what works however is to use the vh [CSS unit](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) (viewport height), so for example if you want the sticky aside to be as tall as the page minus the header (that for example is 50px tall), then you could use something like this:
+>  
+> `height: calc(100vh - 50px);{:css}`
 
 > [!MORE]  
 > [MDN "CSS list style" documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style)