滑动内容调整高度

Question

我需要帮助。我希望我的幻灯片能够对其高度做出响应。问题是屏幕调整或内容太长时。幻灯片很短。

这是截图。

另外我需要在顶部紫色部分添加一个滚动窗口以显示其他文本是否屏幕很短？

我正在使用这个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>

这是我的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在这里打电话：

<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>

正确的内容：

    <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>