Question

因此，今天，在构建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>

我的页脚显示在页面中间而不是页面底部是否有原因？另外，我注意到的另一件事是我的页脚位置是绝对的，就像无论我在何处调用它一样，它始终位于同一位置。

Answer 1

将app.blade.php> <footer>的位置设置为relative，例如：

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

您还可以在此处使用外部样式：）

您希望将元素放置在底部（之后）以及footer.blade.php的{{1}}> <footer id="footer">位置，以便使其与{{1}中的其他元素相关}。

如果您将absolute的位置定义为<body>> relative，则其中包含的其他绝对元素将与此元素app.blade.php相关或映射。

希望！这有助于了解问题。

页脚未显示在页面底部

1 个答案: