页脚静态位于页面底部

Question

我正在使用 laravel 5.5 并且需要在每个页面的底部添加一个页脚。目前我在 app.blade.php 中有页脚以及导航栏和来自其他 .blade 文件的内容使用 yield @yield('content')

app.blade 文件有

html, body {   
 height: 100%;
}

页脚是

footer {
  position: static;
  bottom: 0px;
}

检查页面时，html 和正文是 100% 高度，但页脚只是与内容挂在一起，没有移动到页面底部。

是否有任何幼虫相关的样式可能会干扰定位？

Answer 1

我认为 laravel 样式与问题无关。将 position属性设置为 static 不会给您想要的结果，因为 static 几乎是默认的 position 值每个 html 元素。您可以将其设置为 absolute、fixed 或 sticky，并且根据您的选择，您可能需要将页脚上的 bottom 属性设置为 0px.

这个 CSS-Tricks article 应该可以让您更好地了解如何在页脚上实现 position 和 bottom 属性。

这是一个在页脚上使用 fixed 值并在正文元素上使用 relative 值的实现。

您还可以查看此 codeply project 并尝试更改页脚的 position 值。

html, body {   
 height: 100%;
 background-color: red;
 position: relative;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 10%;
  width: 100%;
  background-color: green;
}

页脚静态位于页面底部

footer static positioned at the bottom of page

css

laravel-5.5