Slide content adjusting height

问题

I need help on this. I want my slide to be responsive on its height. The problems is when the screen adjust or if the content is too long. The slide is short.

Here's a screenshots.

Also i need to add a scrolldown on the top purple part to show its other texts is the screen is short?

Im using this jscrpt

<script>
                    function toggleDiv(divNum) {

                        $("#close").hide();
                        $("#center-content").removeClass("width-400px");
                        $("#right-content").animate({
                                right: '-400'
                            }, 350,
                            function() {
                                $("#center-content").addClass("width-400px");
                                $(".slide").hide();
                                if ($("#div" + divNum)) {
                                    $("#div" + divNum).show();
                                }
                                $("#right-content").animate({
                                        right: '0'
                                    }, 350,
                                    function() {
                                        $("#close").show();

                                    });
                            });
                    }

                    $(document).ready(function() {
                        $("#close").on("click", function(e) {
                            $("#right-content").animate({
                                right: '-400'
                            }, 350);
                            $("#center-content").removeClass("width-400px");
                            $(this).hide()
                        })

                    })
                </script>

And here's my CSS

.slide {
        width: 400px;
        height: 100%;
        position: absolute;
        #right: -400px;
        background: #6b4788;
    }
    #close {
        position: absolute;
        left: 0;
        bottom: 0;
        color: white;
        font-size: 28px;
        font-family: ovo;
        z-index: 10;
        letter-spacing: 5px;
        font-weight: 100;
        padding: 43px 104px 34px 116px;
        background: #4d3065;
    }
    body {
        overflow: hidden;
    }
    #main-content {
        position: absolute;
        width: 100%;
    }
    #right-content {
        position: absolute;
        right: -400px;
        top: 0;
        overflow: hidden;
        width: 400px;
        height: 100%;
    }

Html here to call:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-content">
    <div id="">
        <center>
            <div id="furugganan">
                <center><img src="furugganan-logo.png">
                </center>
                <div id="container">
                    <div id="firstrow">
                        <a onClick="toggleDiv(1)"><img src="alfonsoponce-a.png" id="alfonso">
                        </a>
                        <a onClick="toggleDiv(2)"><img src="female-a.png" id="female" style="margin-left: 30px;">
                        </a>
                    </div>
    </div>

And the right content:

    <div id="right-content">
                    <div id="close">CLOSE (X)</div>
                    <div class="slide" id="div1">
                        <center>
                            <img src="crest.png" style="
    /* z-index: -1; */
    opacity: 0.1;
    position: absolute;
    left: 39px;
    top: 371px;
    height: 354px;
">
                            <img src="sample-pic.png" style="height: 262px; margin-top: 12%;">
                            <h3>ALFONSO PONCE ENRILE</h3>
                            <hr style="width: 90px;margin-top: -7px;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti.</p>
                            <hr style="width: 90px;margin-top: 22px;">
                            <h1 style="margin-top: 30px;">LOREM: 1</h1>
                            <h1>LOREM: 2</h1>
                            <h1>LOREM: 3</h1>
                            <h1>LOREM: 4</h1>
                            <h1>LOREM: 5</h1>

                    </div>
</div>

来源：https://stackoverflow.com/questions/43729092/slide-content-adjusting-height