Skip to main content
Just added a z-index just in case there are elements in the body1, with a z index.
Source Link

I basically use sticky css on the footer making sure the footer element is with the modal content, which is the complete modal content for a force:lightningQuickActionWithoutHeader

With this, the footer will always be sticky to the bottom of the body and the all the content in Body1 div will be scrollable and will scroll under the footer.

<aura:component implements="force:lightningQuickActionWithoutHeader">
    <aura:html tag="style">
        .slds-modal__container{
        max-width: 70rem !important;
        width:70% !important;
        }
        .slds-modal__container .cuf-content {
        padding:0 !important;
        }
        .slds-modal__container .slds-p-around--medium {
        padding: 0rem !important;
        }
        .slds-modal__content {
        height: unset !important;
        max-height: unset !important;
        border-bottom-left-radius: unset !important;
        border-bottom-right-radius: unset !important;
        }
    </aura:html>
    <div style="height:40rem;max-height:40rem>
       <div>Body1</div>
       <footer class="slds-modal__footer">FooterBody</footer>
    </div>
</aura:component>

Custom CSS for Footer:

footer {
    position:stikcy,
    bottom:0,
    z-index:2
}

I basically use sticky css on the footer making sure the footer element is with the modal content, which is the complete modal content for a force:lightningQuickActionWithoutHeader

With this, the footer will always be sticky to the bottom of the body and the all the content in Body1 div will be scrollable and will scroll under the footer.

<aura:component implements="force:lightningQuickActionWithoutHeader">
    <aura:html tag="style">
        .slds-modal__container{
        max-width: 70rem !important;
        width:70% !important;
        }
        .slds-modal__container .cuf-content {
        padding:0 !important;
        }
        .slds-modal__container .slds-p-around--medium {
        padding: 0rem !important;
        }
        .slds-modal__content {
        height: unset !important;
        max-height: unset !important;
        border-bottom-left-radius: unset !important;
        border-bottom-right-radius: unset !important;
        }
    </aura:html>
    <div style="height:40rem;max-height:40rem>
       <div>Body1</div>
       <footer class="slds-modal__footer">FooterBody</footer>
    </div>
</aura:component>

Custom CSS for Footer:

footer {
    position:stikcy,
    bottom:0
}

I basically use sticky css on the footer making sure the footer element is with the modal content, which is the complete modal content for a force:lightningQuickActionWithoutHeader

With this, the footer will always be sticky to the bottom of the body and the all the content in Body1 div will be scrollable and will scroll under the footer.

<aura:component implements="force:lightningQuickActionWithoutHeader">
    <aura:html tag="style">
        .slds-modal__container{
        max-width: 70rem !important;
        width:70% !important;
        }
        .slds-modal__container .cuf-content {
        padding:0 !important;
        }
        .slds-modal__container .slds-p-around--medium {
        padding: 0rem !important;
        }
        .slds-modal__content {
        height: unset !important;
        max-height: unset !important;
        border-bottom-left-radius: unset !important;
        border-bottom-right-radius: unset !important;
        }
    </aura:html>
    <div style="height:40rem;max-height:40rem>
       <div>Body1</div>
       <footer class="slds-modal__footer">FooterBody</footer>
    </div>
</aura:component>

Custom CSS for Footer:

footer {
    position:stikcy,
    bottom:0,
    z-index:2
}
Source Link

I basically use sticky css on the footer making sure the footer element is with the modal content, which is the complete modal content for a force:lightningQuickActionWithoutHeader

With this, the footer will always be sticky to the bottom of the body and the all the content in Body1 div will be scrollable and will scroll under the footer.

<aura:component implements="force:lightningQuickActionWithoutHeader">
    <aura:html tag="style">
        .slds-modal__container{
        max-width: 70rem !important;
        width:70% !important;
        }
        .slds-modal__container .cuf-content {
        padding:0 !important;
        }
        .slds-modal__container .slds-p-around--medium {
        padding: 0rem !important;
        }
        .slds-modal__content {
        height: unset !important;
        max-height: unset !important;
        border-bottom-left-radius: unset !important;
        border-bottom-right-radius: unset !important;
        }
    </aura:html>
    <div style="height:40rem;max-height:40rem>
       <div>Body1</div>
       <footer class="slds-modal__footer">FooterBody</footer>
    </div>
</aura:component>

Custom CSS for Footer:

footer {
    position:stikcy,
    bottom:0
}