如何让页脚粘在底部位置？

Question

我试图让我的页脚粘在某个部分的底部。我正在使用

position: fixed

，但仍然不起作用。

换句话说，我有一个宽度为30%的部分。我想在该部分添加表单元素，我还需要在该部分的底部添加一个粘性按钮，该按钮仅覆盖该部分的 100% 宽度或页面宽度的 30%。

这可行吗？

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>

Answer 1

这样的布局就可以实现。但要做到这一点，您需要更改页脚的布局。我为其提供了更新的代码。但是用我的代码，当你点击创建按钮时，它不会触发

form

的提交。要解决这个问题，你可以用 javascript 来完成。

document.getElementById('create-button').addEventListener('click', function() {
    document.getElementById('contract-form').submit();
});

body {
    height: 100vh
}

.fixed-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1300;
    background: #ffffff;
    padding: 16px 0;
    box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25);
    border-top: 1px solid #bebec1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

<div style="width:30%;height:100%;border:1px solid; position: relative;">
    <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 id="contract-form" novalidate="">
                <div class="MuiGrid-root MuiGrid-container box css-crtrjo-MuiGrid-root">
                </div>
            </form>
        </div>
    </div>
    <div class="fixed-footer css-imiwo4 MuiBox-root css-0">
        <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 id="create-button" class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-14tsggr-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" dpw-variant="primary">CREATE</button>
    </div>
</div>