[SalesForce] Full Screen Quick Action – Lightning Component

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 :
enter image description here

On 14" screen :
enter image description here

Edit:
code of girish:
enter image description here

Best Answer

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 enter image description here

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