时间戳

首页 > 解决方案 > 页脚必须位于页面底部，并且位于所有元素下方

html - 页脚必须位于页面底部，并且位于所有元素下方

问题描述

我做了一个页脚元素贴在页面底部。但是，如果容器中存在多余的元素。页脚元素与容器重叠。此处附有小提琴链接

<div>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        .....
</div>
<footer>
    <h1>Footer Content</h1>
</footer>

这里我有一堆<p>标签，但是footer元素与元素的一部分重叠p。

我不知道出了什么问题。

标签： htmlcss

解决方案

解决此问题并立即为我工作的一种方法是使用flexwith directioncolumn并设置 footer child align-self: end。像这样，你会保证什么都不会重叠。

检查页面底部或内容底部的此堆栈问题页脚，以较低者为准。它将帮助您了解更多。

*,
*:before, 
*:after{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
   height: 100%;
}

.container{
  display: flex;
  flex-direction: column;
   min-height: 100%;
}

.hello-wrapper{
  padding: 2rem 3rem;
}

footer{
  width: 100%;
  height: 100px;
  background-color: #444;
  color: white;
  padding: 20px;
  text-align: center;
  aligh-self: end;
}
<div class='container'>
<div class="hello-wrapper">
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        <p>Helloworld</p>
        
    </div>
<footer>
    <h1>Footer Content</h1>
</footer>
</div>

推荐阅读