I am trying to make my footer sticky to the bottom of a section. I am using position: fixed
, but it is still not working.
In other words, I have a section with a width of 30%. I want to add form elements in that section I also need to add a sticky button at the bottom of that section that only covers the 100% width of the section or 30% of page width.
Is that feasible?
body {
height: 100vh
}
.fixed-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1300;
background: #ffffff;
padding: 16px 42px;
box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25);
border-top: 1px solid #bebec1;
}
<div style="width:30%;height:100%;border:1px solid">
<div class="MuiBox-root css-11b71wf" data-testid="create-contract-content">
<div class="wrapper-container css-1rnkd8n MuiBox-root css-0">
<div class="title-container css-1112he MuiBox-root css-0">
<h2 class="MuiTypography-root MuiTypography-body1 css-1ecwa68-MuiTypography-root">Add New Contract</h2>
</div>
<form novalidate="">
<div class="MuiGrid-root MuiGrid-container box css-crtrjo-MuiGrid-root">
</div>
<div class="fixed-footer css-imiwo4 MuiBox-root css-0">
<div class="css-gg4vpm MuiBox-root css-0">
<div>
<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-wpz0ho-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" dpw-variant="secondary">CANCEL<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-14tsggr-MuiButtonBase-root-MuiButton-root" tabindex="0" type="submit" dpw-variant="primary">CREATE<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
update if I going with position relative and botton one position absolute. button goes up when scroll
3
Answers
You can achieve this layout. But to do this, you need to change layout of the footer. I provide updated code for it. But with my code, when you click the create button, it will not trigger submit of
form
. To solve the issue, you can do it in javascript.To make a sticky header or footer then you need to add
position: sticky;
to your classes and then set the distance from the top or the bottom to 0px, for example, if you want those elements to stick to the top or the bottom of the container, respectively.In addition, I put an overflow scroll in the vertical direction with
overflow-y: scroll;
However, I am not sure that making a sticky footer is the best way to approach the problem of putting buttons at the bottom of a container. You might also want to look at CSS flexbox or CSS grid layout.
Hope it will fix your issues: