html - footer is not located at the bottom of the page - Stack Overflow

顺晟科技

2022-10-19 11:24:16

160

I am using laravel and separate my layouts into navigation, body and footer. I have a layout file to include all three like below:

app.blade.php: .......

    <style>
          .background-img {
                background-image: url('images/login_background.png');
                background-repeat: no-repeat;
                background-size: 100%;
            }

          .bg-color-navbar {
              background-color:#2d2d2d;
          }
    
    </style>
</head>
<body class="background-img">
     <!-- Navigation bar -->
     @include('layouts.navbar')
    <div id="app" >
        <main class="py-4">
            @yield('content')
        </main>
    </div>
     <!-- Footer -->
    @include('layouts.footer')
</body>
</html>

my footer.blade.php:

<footer id="footer-content-collapse-sidebar" style="max-width:100%; overflow: hidden; border-top: 1px solid #fbcc34; padding-top: 0.5rem; background-color: #000;">
    <div class="row pl-2 pr-2">
        <div class="col-6 offset-md-1 col-md-2 text-xs-center text-md-left mb-0">
            <p class="pr-1 pl-1 bujishu-gold mb-1 text-font-size " style="font-size: 0.875rem;"><img width="17" class="mb-1" src="{{asset('/storage/footer/icons/home.png')}}" alt="home-icon"> <b>WE ARE BUJISHU</b></p>
            <ul class="list-unstyled pr-2 pl-2 bujishu-white ">
                <li>
                    <a class="bujishu-white text-font-size" href="#">About Us</a>
                </li>
                <li>
                    <a class="bujishu-white text-font-size" href="#">Our Vision, Culture, Value</a>
                </li>
                <li>
                    <a class="bujishu-white text-font-size" href="#">Partner Engagement</a>
                </li>
                <li>
                    <a class="bujishu-white text-font-size" href="#">Workforce</a>
                </li>
            </ul>
        </div>
        <div class="col-6 col-md-2 text-xs-center text-md-left mb-0">
         
            <h5 class="pr-1 pl-1 bujishu-gold " style="font-size: 0.875rem;"><img width="17" class="mr-1" src="{{asset('/storage/footer/icons/person.png')}}" alt="phone-icon"><b>CUSTOMER SERVICE</b></h5>
            <ul class="list-unstyled pr-2 pl-2 " >
                <li>
                    <a class="bujishu-white text-font-size" href="#">Bujishu Service</a>
                </li>
                <li>
                    <a class="bujishu-white text-font-size" href="#">Privacy Policy</a>
                </li>
                <li>
                    <a class="bujishu-white text-font-size" href="">Track an Order</a>
                </li>
                <li>
                    <a class="bujishu-white text-font-size" href="">FAQ</a>
                </li>
                {{-- <li>
                    <a class="bujishu-gold " href="">Contact Us</a>
                </li> --}}
            </ul>
        </div>

        <div class="col-12 col-md-3 text-xs-center text-md-left mb-0">
            <ul class="list-unstyled pr-2 pl-2">
                <li>
                    <p class="bujishu-gold mb-1 text-font-size"><b>OUR CONTACT</b></p>
                    <p class="bujishu-white mb-1 text-font-size ">
                        <img class="mr-1" src="{{asset('/storage/footer/icons/location.png')}}" alt="Home-Icon"> 1.26.5,
                       ....
                        <br>
                       ....
                    </p>
                </li>
                <li>
                    <p class="bujishu-white mb-1 text-font-size ">
                        <img class="mr-1" src="{{asset('storage/footer/icons/phone.png')}}" alt="phone-icon">
                         03-21818821
                    </p>
                </li>
               
                <li>
                    <a class="bujishu-white mb-1 text-font-size" href="mailto:enquiry@delhubdigital.com" >
                    <img class="mr-1 text-font-size" src="{{asset('/storage/footer/icons/email.png')}}" alt="phone-Icon">bujishu-cs@delhubdigital.com
                    </a>
                </li>
            </ul>
        </div>

       


        <div class="col-8 offset-2 offset-md-0 col-md-3 text-xs-center text-md-left text-font-size margin-zero-xs">
            <div class="hidden-text" style="float:right;">
                <a target="_blank" href="https://facebook.com/DelhubDigital/">
                    <span class="bujishu-white p-2 "><img src="{{asset('/storage/footer/icons/fb-01.png')}}" alt="fb-icon"> Facebook</span>
                </a>
                <a href="">
                    <span class="bujishu-white p-2 "><img src="{{asset('/storage/footer/icons/IG-01.png')}}" alt="insta-icon"> Instagram</span>
                </a>
            </div>
            <div class="padding-top-md">
                <h6 class="text-right mb-0 pt-1 pb-1 text-font-size" style="color:white;">@ 2020 Bujishu. All Rights Reserved</h6>
            </div>
        </div>

    </div>
</footer>




<style>

a:hover{
     color: grey;
     text-decoration: none;
  }

  span:hover{
     color: grey;
     text-decoration: none;
  }

  .text-font-size{
      font-size: 14px;
  }

@media(min-width:768px){
    .padding-top-md{
        padding-top:100px;
    }
}

@media(max-width:768px){
    .hidden-text{
        display: none;
    }
    .margin-bottom-sm{
        margin-bottom: 0;
    }
}

</style>

However, my footer is appears in the middle of the page and not at the bottom of the page. How do I position it to the bottom at all times?

||||

I believe it's an issue that can be solved with CSS, by adding the following to your CSS-file.

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

||||

First of all you to extend your layout, for example:

@extends('layouts.master')

then for every section you want to include:

@section('title')
//
@endsection

@section('content')
//
@endsection

@section('script')
//
@endsection

i believe that you need a start and an end for the section your including

||||

add this to your footer css when you need the fixed footer

    .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    }

when you need sticky footer

footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

}

上一篇：html和css的常用语法代码详解下一篇：php - Is it suffic

网站建设

Html

html - footer is not located at the bottom of the page - Stack Overflow