我正在使用骨骼 CSS,并且试图将div
放在页面底部。
我尝试使用position: absolute; bottom: 0;
在容器内有一个相对位置,但是div
只是与页面的右侧对齐。
.page {
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
}
#home {
background: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container" style="text-align: center;">
<div class="row">
I am a title in the middle of the page.
</div>
<div class="row" style="">
I want to be at the bottom of the page.
<br>
<a href="#">Click here!</a>
</div>
</div>
</div>
可以吗?
答案 0 :(得分:1)
将“底部”文本元素从CONTAINER父级中取出,并将其作为PAGE元素的子级,然后position:absolute将起作用:
https://jsfiddle.net/akLr6zb0/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container" style="text-align: center;">
<div class="row">
I am a title in the middle of the page.
</div>
</div>
<div class="bottom" style="">
I want to be at the bottom of the page.
<br>
<a href="#">Click here!</a>
</div>
</div>
.page {
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
position: relative;
}
#home {
background: red;
}
.bottom {
bottom: 0;
display: block;
position: absolute;
}
答案 1 :(得分:0)
position: absolute; bottom: 0;
是正确的,但是您还需要确保直接父级.container
是页面的高度,然后将所有内容都以display: flex
居中:
.page {
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#home {
background: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container" style="text-align: center;">
<div class="row">
I am a title in the middle of the page.
</div>
<div class="row" style="position: absolute; bottom: 0;">
I want to be at the bottom of the page.
<br>
<a href="#">Click here!</a>
</div>
</div>
</div>
答案 2 :(得分:0)
我不确定这是否是您想要的,但是我通过将容器显示为flex来实现。
.page {
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
}
#home {
background: red;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
position: absolute;
bottom: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container">
<div class="row">
I am a title in the middle of the page.
</div>
<div class="row bottom" style="">
I want to be at the bottom of the page.
<br>
<a href="#">Click here!</a>
</div>
</div>
</div>