Full Screen Quick Action - Lightning Component

Question

I have a lightning component that I open from Quick Action. I added some CSS to open the modal on full screen and this working. What I want to do is to stick the custom footer to the bottom of the component and have a scrollable body (between header and footer).

<aura:component
implements="force:hasSObjectName,flexipage:availableForRecordHome,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader"
access="global">

<div class="modal-header slds-modal__header slds-size_1-of-1">
    <h2 class="slds-modal__title">custom quick action</h2>
</div>
<div style="height: 500px;">
    body - The Height of this part can change
</div>
<div class="modal-footer slds-modal__footer slds-size_1-of-1 ">
    <lightning:button aura:id="buttonCancel" variant="Neutral" class="slds-button" label="Cancel"
        onclick="{!c.handleCancel}" />
    <lightning:button aura:id="buttonSend" variant="Brand" class="slds-button" label="Save"
        onclick="{!c.handleSave}" />
</div>

<aura:html tag="style">
    .cuf-content {
    padding: 0 0rem !important;
    }
    .slds-p-around--medium {
    padding: 0rem !important;
    }
    .slds-modal__content {
    overflow: initial !important;
    height: 99% !important;
    max-height: 99% !important;
    }
    .slds-modal__container{
    max-width: 99% !important;
    width:99% !important;
    }

</aura:html>

</aura:component>

On 21" screen :

On 14" screen :

Edit: code of girish:

Answer 1

Working codebase using the CSS from SLDS. Try not to use custom divs and pixels based height/width will not work well in all screen types

A side note - You should start using LWC components instead of aura. Soon aura will be outdated in the Salesforce ecosystem. and LWC gels with existing builds where aura is used extensively

<aura:component implements="force:hasSObjectName,flexipage:availableForRecordHome,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader"
  access="global"
>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
        <!-- Modal/Popup Box LWC header here -->
        <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                <lightning:Icon iconname="utility:close"
                    alternativetext="close"
                    variant="inverse"
                    size="small" ></lightning:Icon>
                <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Custom Popoup</h2>
        </header>
        <!-- Modal/Popup Box LWC body starts here -->
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
            <p><b>Modals/Popup</b></p>
        </div>
        <!-- Modal/Popup Box LWC footer starts here -->
        <footer class="slds-modal__footer">
            <button class="slds-button slds-button_neutral" title="Cancel">Cancel</button>
            <button class="slds-button slds-button_brand" title="OK">OK</button>
        </footer>
    </div>
</section>
<!-- <div class="modal-footer slds-modal__footer slds-size_1-of-1">
    <lightning:button
      aura:id="buttonCancel"
      variant="Neutral"
      class="slds-button"
      label="Cancel"
      onclick="{!c.handleCancel}"
    />
    <lightning:button
      aura:id="buttonSend"
      variant="Brand"
      class="slds-button"
      label="Save"
      onclick="{!c.handleSave}"
    />
  </div> -->
  <aura:html tag="style">
    .cuf-content { 
        padding: 0 0rem !important; 
    } .slds-p-around--medium {

    padding: 0rem !important; 
} 
.slds-modal__content { 
    overflow: initial       !important; 
    height: 99% !important; 
    max-height: 99% !important; 
    }
    .slds-modal__container{ 
        min-width: 100% !important; 
        width:99% !important; 
        padding-top: 35px!important;
        padding-bottom: 35px!important;
        overflow-y: scroll!important;
    }
    
  </aura:html>
</aura:component>