html - 更改模态大小以确保表单页眉和页脚在移动设备上始终可见

Question

我在这里阅读了很多博客，但似乎找不到合适的 css 来修改或解决我的问题。

Out 主题目前使用一种表格供申请人发送简历。当调整模态以响应移动设备时，似乎页脚上的应用按钮不可见，因此创建了两个用户无法真正看到的滚动。

我想要一些 CSS 帮助，以确保页眉和页脚在所有设备上都可见，并且中间的内容可以滚动。这是当前使用的 HTml：

<div id="jobboard-modal-apply" class="jobboard-modal md-modal md-effect-1 md-show">
    <div class="md-content">
        <a class="md-close" href="javascript:void(0)"><i class="dashicons dashicons-no-alt"></i></a>

<form class="jobboard-form apply-form" method="post" enctype="multipart/form-data">

    <div class="form-title">
        <span></span>
        <h5>Application</h5>
        <h4>CRM Developer</h4>
    </div>

    <div class="form-content">
        
<div class="form-fields" tabindex="0" style="width: 380px; padding-right: 0px; outline: none; overflow: hidden;">

    
<div class="row">

<div class="field col-xs-12 col-sm-12 col-md-12 field-media field-validate">
    <div class="field-header">
        <label class="field-name" for="cv">CV *</label>
            </div>
    <div class="field-content">

<div class="file type-file">
            <div class="file-thumb" title="Uploaded : 2018-11-23 11:10:08">
                            <i class="fa fa-file-word-o"></i>
                    </div>
        <div class="file-info">
            <span class="file-name">Adrian-Gatts-CV.docx</span>
            <span class="file-date">Uploaded 27 days ago</span>
        </div>
    </div>
<input id="cv" type="file" class="field-media" name="cv" data-type="pdf,doc,docx,rtf" data-type-notice="File format not supported, you can only upload the following &quot;pdf,doc,docx,rtf&quot; file." data-size="1024" data-size-notice="You can not upload files larger than 1024Kb">
<button type="button" class="file-select">Select CV</button>
        </div>
</div>

</div>

</div><div style="position: absolute; z-index: 1; margin: 0px; padding: 0px; display: none; left: 405px; top: 131px;"><div class="enscroll-track vertical-track" style="position: relative; height: 300px;"><a href="" class="vertical-handle" style="position: absolute; z-index: 1; height: 300px;"><div class="top"></div><div class="bottom"></div></a></div></div>
    </div>

    <div class="form-footer">
        <button type="submit" class="apply-button btn btn-default btn-xlg">Apply for this job</button>
    </div>

    <input type="hidden" id="_wpnonce" name="_wpnonce" value="861bb0a682"><input type="hidden" name="_wp_http_referer" value="/job/crm-developer/">    <input type="hidden" name="id" value="7703">
    <input type="hidden" name="action" value="apply_job">
    <input type="hidden" name="form" value="jobboard-form">
</form>

        </div>
    </div>

标签： htmlcss