title: div with gradient for text to fade - overflow auto
body: <p>I'm new here so forgive if anything sound very noobish.</p>
  
  <p>I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll. </p>
  
  <p><strong>The Problem:</strong> I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. <strong>I could use a gradient image or just CSS if someone could lead me in the right direction.</strong> I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in </p>
  
  <p>Here's a pic </p>
  
  <p><img src="https://i.stack.imgur.com/bUvaB.png" alt="Picture for question"></p>
  
  <p>If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.</p>