【发布时间】：2019-11-09 04:45:01
【问题描述】：
所以今天，在构建我的 html 刀片模板时，我意识到我的页脚没有显示在页面底部。相反，它显示在页面中间。
这些是我的代码；
app.blade.php（基本上是我的“模板”）
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fdb918">
<link rel="manifest" href="{{asset('manifest.json')}}">
@include('layouts.scripts.mainscripts')
@include('layouts.styles.styles')
@include('layouts.scripts.social-login')
{!! SEO::generate() !!}
</head>
<body>
<div id="app">
<header>
@include('layouts.header.header')
</header>
<main class="py-4">
@yield('content')
</main>
<footer>
@include('layouts.footer.footer')
</footer>
</div>
</body>
@include('layouts.scripts.scripts')
</html>
我的footer.blade.php
<footer id="footer">
<div class="footer-container">
<div class="footer bg-faded">
<div class="container">
<div class="row footer-top flex-md-row no-gutters">
<div class="col-md-4 col-lg-4 col-12 float-sm-left hidden-sm-down">
<small>All rights reserved</small>
</div>
<div class="col-md-4 col-lg-4 col-12 float-sm-right kor_ipad">
<h3>Contact</h3>
<div class="block-help-text">
<div class="help-content">
<a href="mailto:help.my@.com">help.my@.com</a>
</div>
</div>
<div class="block-help-text">
<div class="help-content">
<a href="tel:+">+</a>
</div>
</div>
</div>
<div class="col-md-5 col-lg-4 col-12 float-sm-left hidden-md-up">
<div class="folow-us social-link-inner-mobile">
<a href="https://www.facebook.com//" target="_blank">
<i class="icon-social icon-facebook" title="Facebook Logo | "></i>
</a>
<a href="https://www.instagram.com//" target="_blank">
<i class="icon-social icon-instagram" title="Instagram Logo | "></i>
</a>
<a href="https://www.youtube.com/user/" target="_blank">
<i class="icon-social icon-youtube" title="YouTube Logo | "></i>
</a>
</div>
<small>All rights reserved</small>
</div>
</div>
<div class="footer-bottom">
<div class="row">
<div class="col col-sm-12 col-md-4">
<div class="group-link">
<a href="/privacy-policy">Privacy Policy</a>
<a href="/terms-conditions">Terms & Conditions</a>
</div>
</div>
<div class="col col-md-8 hidden-sm-down no-pd-left">
<div class="folow-us social-link-inner">
<a href="https://www.facebook.com//" target="_blank">
<i class="icon-social icon-facebook" title="Facebook Logo | "></i>
</a>
<a href="https://www.instagram.com//" target="_blank">
<i class="icon-social icon-instagram" title="Instagram Logo | "></i>
</a>
<a href="https://www.youtube.com/channel/UC4Hd_9mBGxhD6PRNy9scHqQ/featured" target="_blank">
<i class="icon-social icon-youtube" title="YouTube Logo | "></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
我的页脚显示在页面中间而不是页面底部是否有原因？另外，我注意到的另一件事是我的页脚位置是绝对的，就像无论我在哪里称呼它，它总是在同一个位置。
【问题讨论】：
-
如果您在浏览器中
inspect element...页脚内容位置在哪里？ -
它表明页脚确实位于所有其他代码行的底部（禁止任何与 jquery 相关的内容）。这就是为什么它有点奇怪。因为即使在检查元素中，它显示在底部，它仍然显示在页面中间。
-
将
app.blade.php > <footer>定位为relative -
如果它仍然不起作用，请告诉我。
-
它现在工作正常，需要一些时间来设置它。但你确定设置为相对是个好主意吗？
标签： html css laravel laravel-blade