Question

我正在使用Materializecss创建React应用。我已经在我的应用程序类中应用了flex。现在，我想在主标签内应用flex，使按钮固定在主标签底部和页脚上方。

我尝试了{margin-top：auto;}，justify-content：flex-end这没有帮助。始终在内容分类后打印按钮。我可以设置内容类的高度，但是小型设备的显示效果很差，并且不能解决我的问题。

JSX代码：

<div className="app">
 <header> <header>
 <main>
   <div className="box">
   <div className="content"> Long text less than 100 words <div>
   <div className="buttons"> <button> Button-1 </button> <button> Button-2 </button> 
   <div>
 <main>
 <footer><footer>
<div>

My css
app {
 display: flex;
 min-height: 100vh;
 flex-direction: column;
}

main {
 flex: 1 0 auto;
}

我想将按钮保持在页脚上方。我的内容类别有100个字，然后按钮应停留在内容类别之后未呈现的页脚上方。

我会很感激。

Answer 1

您尚未对主要元素应用display:flex等。如果这样做，margin-top:auto将起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.app {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: ;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.buttons {
  margin-top: auto;
}

<div class="app">
  <header>header </header>
  <main>
    <div class="box">box</div>
    <div class="content"> Long text less than 100 words </div>
    <div class="buttons">
      <button> Button-1 </button>
      <button> Button-2 </button>
    </div>

  </main>
  <footer>footer</footer>
</div>

如何使用Flex固定页脚上方的按钮

1 个答案: