css 我无法使用Flexbox使元素粘在底部

wkftcu5l 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(143)

我想以这样的方式对齐两个元素，一个贴在顶部，一个贴在底部，我尝试用flexbox来实现，但不想使用绝对定位。
不管我怎么试，都没用：我发现this question是关于股票溢出的，并试图实现这些答案--但我仍然不能达到想要的结果。有人能给我指出正确的方向，或者解释我做错了什么吗？
下面是我的html/css，here，你可以在jsbin上找到代码片段，我尝试了不同的东西。
我找到的关于这个主题的所有其他stackoverflow问题对我也不起作用--我真的不明白为什么。任何帮助都将非常感激。

<html>
  <body>
    <div class="top">
      <p class="text">Top</p>
    </div>
    <div class="bottom">
      <p class="text">Bottom</p>
    </div>
  </body>
</html>

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.top {
  flex-grow: 1;
}

.bottom {
  margin-top: auto;
}

css

来源：https://stackoverflow.com/questions/75355575/i-dont-manage-to-get-an-element-sticking-to-the-bottom-using-flexbox

1条答案

按热度按时间

y1aodyip1#

你可以使用CSS网格，只创建3行。两行的大小为auto，使行尽可能大，因为他们需要和一个大小为1fr意味着它采取了其余的空间。有一个伟大的guide for CSS grid在CSS技巧。

body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  /* CSS Grid */
  display: grid;
  /* 3 rows */
  grid-template-rows: auto 1fr auto; 
}

.bottom {
  background: red;
}

.top {
  background: red;
}

<body>
  <div class="top">
    <p class="text">Top</p>
  </div>
  <div>
    Content
  </div>
  <div class="bottom">
    <p class="text">Bottom</p>
  </div>
</body>

赞(0）回复(0）举报 2023-02-06

我来回答

css 我无法使用Flexbox使元素粘在底部

1条答案

相关问题

热门标签

最新问答