英文:
I don't manage to get an element sticking to the bottom using flexbox
问题
我想将两个元素对齐，一个粘在视口顶部，另一个粘在底部。我试图使用 flexbox 来实现这一点，但不想使用绝对定位。
无论我尝试什么，都不起作用：我找到了这个问题在 Stack Overflow 上，尝试实施那些答案 - 但我仍然无法实现想要的结果。有人能指点我正确的方向，或者解释我做错了什么吗？
以下是我的 HTML / CSS，在这里 你可以在 jsbin 上找到我尝试过的不同代码片段。
我找到的关于这个主题的其他 Stack Overflow 问题对我来说也没有用 - 我真的不明白为什么。任何帮助都将不胜感激。
<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;
}
英文:
I want to align two elements in such a way, that one sticks to the top, and one to the bottom of the viewport. I'm trying to achieve this with flexbox, but don't want to use absolute positioning.
Whatever I tried, didnt work: I found this question on stock overflow, and tried to implement those answers - yet I still can't achieve the wanted result. Can anybody point me in the right direction, or explain what I did wrong?
Below is my html / css, here you can find the code snippets on jsbin, with different stuff i tried.
All of the other stackoverflow questions I found regarding this topic didn't work for me either - I really don't get why. Any help would be really appreciated.
<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;
}
答案1
得分: 2
你可以使用CSS网格（CSS grid），只需创建3行。其中两行的大小为auto，使行的大小适应其内容，另一行的大小为1fr，表示它占据剩余的空间。在CSS Tricks上有一个很好的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>
英文:
You could use CSS grid and just create 3 rows. Two with size of auto making the rows as big as they need to be and one of size 1fr meaning it takes the rest of the space. There is a great guide for CSS grid at CSS Tricks.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-html -->
<body>
<div class="top">
<p class="text">Top</p>
</div>
<div>
Content
</div>
<div class="bottom">
<p class="text">Bottom</p>
</div>
</body>
<!-- end snippet -->
答案2
得分: 2
以下是翻译好的部分：
min-height: 100%需要更改为min-height: 100vh，因为使用100%时，body只会占用其直接子元素的总高度。- Flexbox 中的
justify-content: space-between用于将最外层的子元素移到 flexbox 容器的两侧。使用flex-direction: column时，它们将分布在容器的顶部和底部。 - 上述操作使
.top和.bottom的 CSS 变得过时。
片段
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
/* 演示，以更好地查看空间分布 */
* { outline: 1px dashed }
p {
/* 注意：默认情况下，<p> 具有 'margin: 1em 0'，会在上下添加额外的空间 */
}
body {
min-height: 100vh; /* 从 100% 更改而来 */
/* 因为 100% 会使 body 仅占用其包含的元素的总高度。
100vh 将强制它填充整个视口高度。
*/
margin: 0; /* 以删除 HTML 默认的 8px 间距 */
/* 边距会增加 body 的总高度，导致在使用 100vh 时出现垂直滚动条 */
display: flex; flex-direction: column;
/* 将两个外部元素移到两侧 */
/* 更多元素分布在中间 */
justify-content: space-between;
/* 我在顶部和底部之间插入了额外的 <div>，以展示发生的情况。 */
}
.top {/* [不建议使用] */
/* 使此元素填充整个屏幕 */
/* flex-grow: 1; /* 可能不需要，已禁用 */
}
.bottom {/* [不建议使用] */
/* margin-top: auto; /* 不需要产生效果 */
/* 由 flexbox 父级的 justify 属性处理 */
}
/*
随着内容的增长，body 可能（并且很可能）会超过 100vh，导致 .bottom 向下移出视口。当您向下滚动时，.top 也会移出视图。
如果您需要将顶部/底部固定在屏幕上，您将需要使用元素的 position: fixed 属性，而不是 Flexbox 解决方案。
- .top { position: fixed; top: 0 }
- .bottom { position: fixed; bottom: 0 }
*/
<!-- language: lang-html -->
<div class="top">
<p class="text">顶部</p>
</div>
<div>
<p>额外的 div > p 1</p>
</div>
<div>
<p>额外的 div > p 2</p>
</div>
<div class="bottom">
<p class="text">底部</p>
</div>
<!-- end snippet -->
英文:
The CSS in the snippet contains a full explanation of what I did and why, so here just a summary:
min-height: 100%needs to bemin-height: 100vhas with100%body will only take up the summarized height of the direct child elements it contains.- Flexbox
justify-content: space-betweento move outermost child elements to either side of the flexbox container. Withflex-direction: columnthat would be top and bottom of the container. - The above makes
.topand.bottomCSS as-is obsolete.
Snippet
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
/* Demo, to better see space distribution */
* { outline: 1px dashed }
p {
/* BEWARE: by default a <p> has 'margin: 1em 0'
adding extra space above and below */
}
body {
min-height: 100vh; /* from 100% */
/* as 100% will make body only use up total height
of elements it contains. 100vh will force it to
fill the entire viewport height.
*/
margin: 0; /* to remove HTML default 8px spacing */
/* Margin adds to the total height of body
causing the vertical scrollbar to appear
when using 100vh */
display: flex; flex-direction: column;
/* moves two outer elements to either side */
/* more elements get distributed inbetween */
justify-content: space-between;
/* I put in extra <div> between top and bottom
to show what happens.
*/
}
.top {/* [OBSOLETE] */
/* makes this element fill the entire screen */
/* flex-grow: 1; /* probably unwanted, disabled */
}
.bottom {/* [OBSOLETE] */
/* margin-top: auto; /* not required for effect */
/* handled by flexbox parent justify property */
}
/*
As body grows with content it can (and probably will)
exceed 100vh, making .bottom move downward out of the
viewport. And when you scroll down, .top will move out
of view.
If you need either top/bottom permanently fixed you
will have to use the position: fixed property
on the elements instead of the Flexbox solution.
- .top { position: fixed; top: 0 }
- .bottom { position: fixed; bottom: 0 }
*/
<!-- language: lang-html -->
<div class="top">
<p class="text">Top</p>
</div>
<div>
<p>extra div &gt; p 1</p>
</div>
<div>
<p>extra div &gt; p 2</p>
</div>
<div class="bottom">
<p class="text">Bottom</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论