如何使页脚始终在底部 [英] How to make the footer always at the bottom

问题描述

我正在制作一个网站，并且我正在尝试将页脚始终放在底部.我希望页脚始终位于浏览器窗口的底部，但如果内容足够长，它会将页脚推到视线之外并进一步向下移动.现在，页脚总是紧跟在其上方的内容之后.

我尝试设置 display: flex, flex-direction, align-items: flex-end, margin-bottom: 0px，但是没有用.我也在尽量避免设置固定高度.

相关代码

Footer.js

<span><a href='/'><img src={LinkedIn} alt='LinkedIn'/></a></span><span><a href='/'><img src={Mail} alt='Email'/></a></span><span><a href='/'><img src={Resume} alt='Resume'/></a></span>
<div><span className='footer-link'><a href='/'>Home</a></span><span className='footer-link'><a href='/about'>关于</a></span><span className='footer-link'><a href='/blog'>Blog</a></span><span className='footer-link'><a href='/contact'>联系方式</a></span>

<div className='footer-copyright'>2020 张勇.这个网站是由 Daniel Zhang 用 React 从零开始制作的.</div></页脚>

.footer {对齐项目:居中；边框顶部:1px 纯灰色；边框宽度:100%；box-sizing: 边框框；显示:弹性；弹性方向:列；弹性收缩:0；字体大小:12px；边距:0px 自动；填充:10px 0px;文本对齐:居中；}.icons img {显示:内联块；填充:10px；宽度:25px；}.footer-link {填充:0px 5px；}.footer-link a {颜色:灰色；文字装饰:无；}.footer-link a:hover {颜色:黑色;文字装饰:无；}.footer-copyright {填充:5px 0px;}

App.js

<路由器><开关><路由精确路径='/' render={() =><主页/>}/><路由精确路径='/about' render={() =><关于/>}/><路由精确路径='/blog' render={() =><博客/>}/><路由精确路径='/contact' render={() =><联系方式/>}/>{//* 添加页面未找到.*/}<路由渲染={()=><主页/>}/></开关></路由器><页脚/>

App.css

* {字体系列:'Lato'，无衬线；}html，正文{高度:100%；边距:0px；}身体 {显示:弹性；弹性方向:列；}.容器 {弹性:1 0 自动；边距:0px 自动；宽度:65%；}

解决方案

试试flex-direction: column;.

document.getElementById('add').addEventListener('click', e => {document.getElementById('content').innerHTML += '<br/>content<br/>content<br/>content';});

html,身体 {边距:0；高度:100%；}身体 {显示:弹性；弹性方向:列；}.内容 {弹性:1 0 自动；}.页脚{背景:#999；弹性收缩:0；}

<div class="内容"><button id="add">添加内容</button><p id="内容">内容</p>

<footer class="footer">footer</footer>

I'm making a website, and I'm trying to make the footer always at the bottom. I want it so that the footer is always at the bottom at the browser window, but if the content is long enough, it will push the footer out of sight and further bottom. Right now, the footer is always positioned immediately after the content above it.

I tried setting display: flex, flex-direction, align-items: flex-end, margin-bottom: 0px, but it didn't work. I'm also trying to avoid setting fixed heights.

Relevant Code

Footer.js

<footer className='footer'>
    <div className='icons'>
        <span><a href='/'><img src={LinkedIn} alt='LinkedIn'/></a></span>
        <span><a href='/'><img src={Mail} alt='Email' /></a></span>
        <span><a href='/'><img src={Resume} alt='Resume' /></a></span>
    </div>
    <div>
        <span className='footer-link'><a href='/'>Home</a></span>
        <span className='footer-link'><a href='/about'>About</a></span>
        <span className='footer-link'><a href='/blog'>Blog</a></span>
        <span className='footer-link'><a href='/contact'>Contact</a></span>
    </div>
    <div className='footer-copyright'>2020 Daniel Zhang. This site was made by Daniel Zhang from scratch with React.</div>
</footer>

.footer {
    align-items: center;
    border-top: 1px solid grey;
    border-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-size: 12px;
    margin: 0px auto;
    padding: 10px 0px;
    text-align: center;
}

.icons img {
    display: inline-block;
    padding: 10px;
    width: 25px;
}

.footer-link {
    padding: 0px 5px;
}

.footer-link a {
    color: grey;
    text-decoration: none;
}

.footer-link a:hover {
    color: black;
    text-decoration: none;
}

.footer-copyright {
    padding: 5px 0px;
}

App.js

<NavBar />
<Router>
  <Switch>
    <Route exact path='/' render={() => <Home />} />
    <Route exact path='/about' render={() => <About />} />
    <Route exact path='/blog' render={() => <Blog />} />
    <Route exact path='/contact' render={() => <Contact />} />
    {/* Adds page not found. */}
    <Route render={() => <Home />} />
  </Switch>
</Router>
<Footer />

App.css

* {
    font-family: 'Lato', sans-serif;
}

html, body {
    height: 100%;
    margin: 0px;
}

body {
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1 0 auto;
    margin: 0px auto;
    width: 65%;
}

解决方案

Try flex-direction: column;.

document.getElementById('add').addEventListener('click', e => {
  document.getElementById('content').innerHTML += '<br />content<br />content<br />content';
});

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

.footer {
  background: #999;
  flex-shrink: 0;
}

<body>
  <div class="content">
    <button id="add">Add Content</button>
    <p id="content">content</p>
  </div>
  <footer class="footer">footer</footer>
</body>

这篇关于如何使页脚始终在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！