侧边栏内容移出页面

Question

我有一个固定的侧栏但是当屏幕高度降低时，内容会流出屏幕而我不知道如何修复它，侧边栏中的图像也会扩展以显示更多内容。侧边栏需要修复，但我还需要显示此内容。

＆＃34;等等等等等等等。但是当屏幕高度较小时是不能看到的部分

这是我网站的一个JS小提琴https://jsfiddle.net/yjz0jmna/

    <!--SIDE BAR-->
<div class="sideBar">
    <div id="logo">
        <img src="images/logo-shot.png" />
    </div>

     <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Solutions</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <div id="newsletter">
        <h1>NEWSLETTER</h1>  

    <div id='content'>
        <div id="hidden-content">
            <span class="signup">Sign Up Today</span> <input class="side-mail" type="text" name="FirstName" placeholder="Enter your email here"><br> 
            <input type="submit" value="SUBMIT" class="submit-button">
        </div>
    </div>

    <div id='button'><sctrong><img src="images/more-banner.png"  /></strong></div>

    <script>
         $("#button").click(function(){
                $("#content").stop().slideToggle();
                return false;
            }); 

    $("#button").hover(function(){
                $(this).stop().css({"cursor" : "pointer"})
            });
    </script>

    </div>

        <div id="barFoot">

        <p>© 2013 McAllisters</br>
        Paxton House,</br>
        No 11 Woodside Crescent,</br>
        Glasgow,</br>
        G3 7UL</p>

        </br>  </br>  </br>  </br>  </br>  </br>  </br>  </br>  </br>  </br>  </br>

   </div>

</div>

CSS：

.sideBar {
    position:fixed;
    top:0;
    left:0;
    background:#e95259;
    width:200px;
    height:100%;
    z-index:999;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right:850px; /* Must nclude width of sidebar */
        border-right: solid 10px #fff;
    border-left: solid 10px #fff;
}