面板体高度不随html体扩展

Question

Hiii Everyone，

我有多个div.Inside每个div将有面板主体及其页脚。发生的事情是基于面板主体内容，而不是调整其面板主体上方的重叠面板页脚。下面是我的截图

在上面的图片中，你可以理解发生了什么。我的示例代码是

<main class="page-content content-wrap" style="background-color:#E9EDF2;height:auto">
    <div id="main-wrapper">
        <div id="five_radio_question">
            <div class="panel-body">
                <br/><br/>
                <h2 style="color:#C32F10"><b>Reorder Paragraphs</b></h2><br/>
                <div class="panel-body" style="background-color:#EFAD4D;color:#fff;border-radius:4px;padding:1px">
                    <h4>The text bubbles in the left panel have been placed in a random order. Restore the original order by dragging the text bubbles from the left panel to the right panel.</h4>
                </div>      
                <br/>
                <p style="font-size:14px">
                    Write 1-5 next to each paragraph to indicate the order you think is correct.
                </p>            
                Contentss
            </div>
        </div>
        <div class="panel-footer">
            <h3 style="float:left"> Question 5 of 14</h3>
            <div style="float:right">
                <button class="btn btn-danger btn-lg first_ques_button4">
                    Previous Question
                </button>
                <button class="btn btn-danger btn-lg second_ques_button4">
                    Next Question
                </button>
                &nbsp;&nbsp;&nbsp;
        </div>
    </div>
</main>

此外，我还在google的帮助下以麻烦的方式尝试了css.And我的问题没有得到解决。

#main-wrapper:after {
    clear: both;
    content: "";
    display: table;
}
body {
    display: block;
    position: relative;
    height: auto;
    min-height: 100% !important;
}

请有人帮我解决这个问题。谢谢提前..