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是几乎每个html元素的默认position值。您可以将其设置为absolute，fixed或sticky，根据您的选择，您可能需要将页脚上的bottom属性设置为0px。< / p>

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

以下是使用页脚上的fixed值和body元素上的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;
}

页脚静态位于页面底部

1 个答案: