html - 如何让页脚始终在底部-6ren

html - 如何让页脚始终在底部

转载作者：行者123 更新时间：2023-12-02 19:18:40

25

4

我正在制作一个网站，我试图使页脚始终位于底部。我希望页脚始终位于浏览器窗口的底部，但如果内容足够长，它会将页脚推到视线之外并进一步位于底部。现在，页脚始终位于紧邻其上方内容之后的位置。

我尝试设置display: flex, flex-direction, align-items: flex-end, margin-bottom: 0px ，但没有成功。我还试图避免设置固定高度。

相关代码

页脚.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 />

应用程序.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%;
}

最佳答案

尝试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>

关于html - 如何让页脚始终在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63351135/

25

4

0

文章推荐： mysql - 大查询 : Join single latest row from second table

文章推荐： java - 如何在java中设置搜索方法

文章推荐： python - pyarrow 将列添加到 pyarrow 表

vim 通过快捷方式直接访问路径文件，始终
当我使用路径文件上的快捷方式在文件之间移动时，似乎我不仅仅是在文件之间移动。我使用>转到一个文件，在该文件中我更改光标的位置并执行某些操作，然后按 gf noremap 关于vim 通过快捷方式直
verilog 始终、开始和结束评估
我正在尝试使用 Pong P. Chu 的书来学习 Verilog。我有一个关于如何评估和实现始终 block 的问题。作者代码中的风格让我感到困惑。在此示例中，他编写了一个具有两个输出寄存器“y1
Javascript xmlhttprequest 始终
我正在尝试制作一个聊天应用程序，因此我需要它始终接收服务器信息。因此，当请求完成时，在: http.onreadystatechange=function(){ 我再次调用该函数，因此: reques
verilog - Verilog 始终@* 敏感度列表中包含哪些内容？
当您在 always block 敏感度列表中使用通配符 @* 时，我对什么被视为输入有点困惑。例如，在下面的示例中，哪些信号被解释为导致 always block 被重新评估的输入？据我了解，cl
c++ - 硬件断点 EXCEPTION_SINGLE_STEP 始终
我有一个充当调试器的程序。我为线程设置了一个 hw bp，将 dr0 设置为我希望 bp 所在的地址，将 dr7 设置为 1，因为我希望 bp 在每次执行该地址时生成一个事件。它有效，但现在的问题是
bash - 如何以管理员身份运行 Git Bash(始终)
如何每次都以管理员身份在 Windows 上运行 git bash。操作系统 - Windows 10 家庭版 64 位最佳答案我在 Google 上找到了这个结果: 将 Git Bash 设置
C 套接字双栈 ss_family 始终 IPv6
使用 accept() 时或 getpeername() , sockaddr_storage总是有 ss_family=AF_INET6 : struct sockaddr_storage addr
javascript - Cordova:始终 deviceready 尚未触发
我在 Cordova 方面还有另一个问题。我想在 Cordova 7.1.0 中使用插件“cordova.custom.plugins.exitapp”和“cordova-plugins-printe
始终 block 中的 Veriloggenerate/genvar
我试图让模块通过 ISE 12.4 中的语法检查，但它给了我一个我不明白的错误。首先是代码片段: parameter ROWBITS = 4; reg [ROWBITS-1:0] temp; genv
ios - iOS cordova允许“始终”访问位置
我正在使用Cordova开发适用于iOS的应用程序，其中包括地理位置功能(我使用官方插件https://github.com/apache/cordova-plugin-geolocation)。我在
始终 block 的灵敏度列表中的 Verilog 多个信号变化
我想知道是否有可能只在敏感列表中的多个信号一起变化时才执行 always block 。例如，假设我有一个信号“in”和另一个“posedge clk”。我希望在两个信号都发生变化时执行 alway
java - 游标.getCount 始终 = 0
我需要实现一种算法来访问数据库来检查最后一个元素，以便计算新的元素。当然，第一次这是不可能的，因为数据库是空的，我得到 IndexOutOfBoundsException) index 0 reque
javascript - 使用 jQuery 具有相同高度的两个元素 - 始终
我正在利用我在网上找到的画廊系统，根据鼠标图像的接近程度，它会按比例增长。链接:Gallery 好吧，我调整了代码以响应(如您所见正在 build 中)并且没有明显的问题。我的问题在更改分辨率时开始
.net - 使 Windows 应用程序始终位于其他窗口之上并处于焦点位置 - 始终
我正在创建一个 kiosk 应用程序，我想确保它无论如何始终位于其他 Windows 应用程序和 Windows 任务栏之上。我已经阻止了 Windows 键盘命令(alt-tab 等)，但仍有可能
javascript - 容器组件是否应该*始终*连接到 Redux？
我即将开始一个新的 React 项目，并尝试利用我以前的知识来创建一些关于我如何构建应用程序的规则。有些事情我认为是真的: Redux 保存整个应用程序的“主要”数据如果需要跨应用程序共享，Red
visual-studio-code - 是否可以将集成终端*始终*放在右侧？
当你打开 VS Code 时，终端默认是在底部打开的。您可以单击该图标将其向右移动。我想知道是否有办法将右侧打开设置为默认值。谢谢。最佳答案是的 - 在 v1.20 中引入了设置 workb
python - 修改 `objects` 以*始终*返回对象的子集？
我有一个Events表，其中包含各种类型的事件。我只关心其中一种类型。因此，我编写的每个查询都以开头 Events.objects.filter(event_type="the_type").\
swift - 计时器未触发(timeInterval 始终 == 0.0)
我在单例中创建了一个Timer，并且我一直在努力解决为什么Timer没有触发。我查看了这里的帖子，但没有找到我认为可以直接回答我的问题的帖子。 class ConnectionStateMonitor
ios - prepareForSegue 传递索引 0 的值...始终
我在 TableViewController 中显示了一组项目。它们在 TVC 中正确显示。下面的代码会继续，但它只会继续到我的 MKMapItem 数组的 indexPath 0，而不是被单击的单元
ios - 应用内购买错误，始终 myProduct 为 0
我的 VC 是这样的: var coins = 50 // coins override func viewDidLoad() { super.viewDidLoad() if(SKP

首页

博学

6Ren·AI

商城

html - 如何让页脚始终在底部