-2

I've declared a footer, yet it still wont stick to the bottom? Here is an image of the footer and explains why it wont stick to the bottom.

https://i.stack.imgur.com/Vv6Dg.png

Here is the code

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>{{ config('app.name') }}: @yield('title')</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
    <link href="/assets/hhh/frontend/css/bulma.css" rel="stylesheet" type="text/css">
    <link href="/assets/hhh/frontend/css/override.css?v={{time()}}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:regular,bold|Ubuntu+Condensed:regular">
</head>
<body>
    <section class="hero is-small is-danger is-bold custom-hero">
        <div class="hero-body">
            <div class="container">
                <div class="columns">
                    <div class="column is-9 logo-column">
                        <h1 class="title"> &nbsp; {{ config('app.name') }} Hotel...</h1>
                        <h2 class="subtitle"> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;The users at mind</h2>
                    </div>
                    <div class="column" style="margin-left:-70px;">
                        <div class="button is-danger" style="background-color: #00000052;border:1px solid #00000052;color: white;">
                            <i class="fa fa-users"></i> &nbsp; {{ $onlineCount }}
                        </div>&nbsp;
                        <a href="{{ route('frontend.user.client') }}" target="_blank" class="button is-danger" style="">
                            <i class="fa fa-globe"></i> &nbsp; Join Game
                        </a>
                        <br>
                        <div class="button is-warning" style="margin-top: 10px;    background-color: #00000052;border-color: transparent;width:199px;color: white;border: 1px solid #00000052;">Server Status: &nbsp; <i class="fa fa-spinner"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-foot">
            <div class="container">
                @yield('nav_parent')
            </div>
        </div>
    </section>
    @yield('nav_child')
    <div class="container"><br>
        @yield('content')
        @include('frontend.partials.scripts')
    </div>
    <footer class="footer">
        <p>Some text to go on your footer.</p>
    </footer>
</body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
genid
  • 1
  • 1
    where is your css? putting footer alone won't do it. need the css to help you further – Vipin Mohan Mar 01 '18 at 12:55
  • I use a CSS framework, I don't need to post the css. That's like posting a bootstrap question and posting the whole bootstrap css, LOL? – genid Mar 01 '18 at 13:00
  • Actually you do, every framework has similar but different set of codes. To start with if you need a absolute footer, i will use `.footer{position:absolute; bottom: 0px;}` – Vipin Mohan Mar 01 '18 at 13:01

1 Answers1

-3

I think I understand your problem ( Even if post code...)

If you want to your footer stick at the bottom of your page, you need to set a position: fixed; bottom: 0; on the parent.

If you want some detail please paste some code.

KolaCaine
  • 2,037
  • 5
  • 19
  • 31
  • This is really a comment, not an answer. – Paulie_D Mar 01 '18 at 13:04
  • fixed will just make it sticky, and possibly overlap the most bottom content (if any). If using fixed, i suggest to put some padding or margin whichever is your practice, equal or greater to the height of footer – Vipin Mohan Mar 01 '18 at 13:06