gpt4 book ai didi

html - 页脚未显示在页面底部

转载 作者:行者123 更新时间:2023-11-27 23:46:19 27 4
gpt4 key购买 nike

所以今天,在构建我的 html Blade 模板时,我意识到我的页脚没有显示在页面底部。它反而显示在页面中间。

这些是我的代码;

app.blade.php(基本上是我的"template")

<!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>

我的页脚显示在页面中间而不是页面底部是否有原因?另外,我注意到的另一件事是我的页脚位置是绝对的,就像无论我在哪里调用它一样,它总是在同一个位置。

最佳答案

制作app.blade.php > <footer>定位为 relative喜欢:

<footer style="position:relative;">
@include('layouts.footer.footer')
</footer>

你也可以在这里使用外部样式:)

您想将元素放在底部(在 之后)和您的 footer.blade.php 中> <footer id="footer">位置为 absolute所以它显示与 <body> 中的其他元素相关.

如果定义 relative定位到 app.blade.php > <footer> ,其中包含的其他绝对元素将从该元素关联或映射 <footer> .

希望如此!这有助于理解问题。

关于html - 页脚未显示在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56786332/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com