Footer within Body

[EX-EMP]

Greetings!

I have been unable to sovle this issue where the footer which i have in my razor page does not want to cover the bottom area of the body. When inspecting i can see there is a padding of 16px on the area. I do not want the footer to be on the main layout, since it has to shrink with the menu open and be specific based on the current page in the body. The footer must be sticky at the bottom of the page, and not be weird or stuck when changing the datagrid's item per page to 50 or 100.

.rz-layout .rz-body {
    overflow-x: hidden;
    --rz-body-padding: 0px;
}

.rz-body {
    --rz-body-padding:0px;
}

I want to either remove the padding from that element or want the footer to cover the bottom area of the page.

<RadzenFooter Style="position:sticky; bottom:0; left:0; width:stretch; margin-left: -16px; margin-right: -16px; box-sizing: content-box;">
    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="AlignItems.Center">
        <RadzenColumn >
            <RadzenButton Text="Refresh" Click="@(args => Grid.RefreshDataAsync())" />
            <RadzenButton Click="@(args => Settings = null)" Text="Clear"  />
        </RadzenColumn> 
        <RadzenColumn >
            <RadzenButton Disabled="_detailsDisabled" Text="details" ButtonStyle="ButtonStyle.Info" Variant="Variant.Filled" Click=@(args => EditRow(args, selectedRows.FirstOrDefault())) />
        </RadzenColumn>
    </RadzenStack>
</RadzenFooter>

[korchev]

Hi @EX-EMP,

You can try something like this:

Layout:

<RadzenBody style="display:flex;padding: 0;flex-direction:column">
    @Body
</RadzenBody>

Page:

     <div style="flex: 1; overflow: auto">
        <RadzenDataGrid />
    </div>
     <RadzenFooter>
            Footer
     </RadzenFooter>

It should look like this:

[EX-EMP]

Thanks a lot, and thanks for the quick response!
Your suggested solution works