如何将页脚推到页面底部?
How do I push the footer to the bottom of the page?
除了 iPhone X 和 iPad,我在桌面版和移动版的页脚下没有任何 space。我弄乱了 media
、calc(100vh - height)
overflow
、position
等,但似乎没有任何效果。我读到一个建议,将所有内容放入一个容器中,然后将页脚设置为 position: absolute
,但我不确定这将如何影响我的网格。
body {
line-height: 1;
background-color: #f3f3f3;
}
.services-wrapper {
display: grid;
width: auto;
grid-template-rows: auto 3fr;
grid-row-gap: 20px;
height: calc(100vh - 30px);
}
.services-grid {
padding-bottom: 30px;
overflow: auto;
}
.services-grid>div {
background-color: white;
vertical-align: middle;
padding: 25px;
margin: 30px;
}
footer {
position: relative;
padding-top: 5px;
margin-top: -30px;
background-color: white;
height: 30px;
width: 100%;
overflow: hidden;
clear: both;
}
<header></header>
<main>
<section class="services-banner">
<div class="services-vertical-center">
</div>
</section>
<section class="services-grid-wrapper">
<div class="services-grid">
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
</div>
</section>
</main>
<footer></footer>
我想你正在寻找这样的东西:
html, div, header, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
footer,header,nav,section {
display:block;
}
.services-wrapper {
display: grid;
width: auto;
grid-template-rows: auto 3fr;
grid-row-gap: 20px;
height: calc(100vh - 30px);
}
.services-grid {
padding-bottom: 30px;
overflow: auto;
}
.services-grid > div {
background-color: white;
vertical-align: middle;
padding: 25px;
margin: 30px;
}
body{
background-color:rgb(39, 39, 39);
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
padding: 17px;
}
a{
padding: 20px;
font-size: 18px;
color:white;
text-decoration:none;
}
<body>
<header>
</header>
<main>
<section class="services-banner">
<div class="services-vertical-center">
</div>
</section>
<section class="services-grid-wrapper">
<div class="services-grid">
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
</div>
</section>
</main>
<div class="footer">
<a href="">Terms
</a>
<a href="">Privacy policy</a>
<a href="">About</a>
<a href="">Contact Us</a>
</div>
</body>
如果对你有帮助,请告诉我。
您可以尝试将正文设置为 flex
。
它还有助于将 html
和 body
设置为具有 window 高度的最小高度。
html, body {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
body {
position: relative;
min-height: 100vh;
}
main {
padding-bottom: 2.5rem;/* Footer height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;/* Footer height */
}
或使用网格:
<body>
<div class="grid-container">
<header></header>
<main></main>
<footer></footer>
</div>
</body>
.grid-container {
display: grid;
grid-template-areas:
'header'
'main'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 5rem 1fr 5rem;
height: 100%;
}
除了 iPhone X 和 iPad,我在桌面版和移动版的页脚下没有任何 space。我弄乱了 media
、calc(100vh - height)
overflow
、position
等,但似乎没有任何效果。我读到一个建议,将所有内容放入一个容器中,然后将页脚设置为 position: absolute
,但我不确定这将如何影响我的网格。
body {
line-height: 1;
background-color: #f3f3f3;
}
.services-wrapper {
display: grid;
width: auto;
grid-template-rows: auto 3fr;
grid-row-gap: 20px;
height: calc(100vh - 30px);
}
.services-grid {
padding-bottom: 30px;
overflow: auto;
}
.services-grid>div {
background-color: white;
vertical-align: middle;
padding: 25px;
margin: 30px;
}
footer {
position: relative;
padding-top: 5px;
margin-top: -30px;
background-color: white;
height: 30px;
width: 100%;
overflow: hidden;
clear: both;
}
<header></header>
<main>
<section class="services-banner">
<div class="services-vertical-center">
</div>
</section>
<section class="services-grid-wrapper">
<div class="services-grid">
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
</div>
</section>
</main>
<footer></footer>
我想你正在寻找这样的东西:
html, div, header, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
footer,header,nav,section {
display:block;
}
.services-wrapper {
display: grid;
width: auto;
grid-template-rows: auto 3fr;
grid-row-gap: 20px;
height: calc(100vh - 30px);
}
.services-grid {
padding-bottom: 30px;
overflow: auto;
}
.services-grid > div {
background-color: white;
vertical-align: middle;
padding: 25px;
margin: 30px;
}
body{
background-color:rgb(39, 39, 39);
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
padding: 17px;
}
a{
padding: 20px;
font-size: 18px;
color:white;
text-decoration:none;
}
<body>
<header>
</header>
<main>
<section class="services-banner">
<div class="services-vertical-center">
</div>
</section>
<section class="services-grid-wrapper">
<div class="services-grid">
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
<div class="services-grid-desc">
</div>
</div>
</section>
</main>
<div class="footer">
<a href="">Terms
</a>
<a href="">Privacy policy</a>
<a href="">About</a>
<a href="">Contact Us</a>
</div>
</body>
如果对你有帮助,请告诉我。
您可以尝试将正文设置为 flex
。
它还有助于将 html
和 body
设置为具有 window 高度的最小高度。
html, body {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
body {
position: relative;
min-height: 100vh;
}
main {
padding-bottom: 2.5rem;/* Footer height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;/* Footer height */
}
或使用网格:
<body>
<div class="grid-container">
<header></header>
<main></main>
<footer></footer>
</div>
</body>
.grid-container {
display: grid;
grid-template-areas:
'header'
'main'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 5rem 1fr 5rem;
height: 100%;
}