Question

我知道这已被问了一百万次，我认为我做得对，但是当我的朋友在他的屏幕上检查我的网站时，页脚和屏幕底部之间有一个间隙，因为在我的屏幕上它完美无缺。

php代码来自laravel，但我认为这是一个css问题。

我无法看到我在哪里出错。

我的css

html, body{
    height: 100%;
    width: 100%;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 20px;
}

.contact_wrapper {
    background: #fff none repeat scroll 0 0;
    height: 234px;
    position: absolute;
}

我的模板

<body>
    <div class="container-fluid">
        <!-- BEGIN MENU SECTION -->
            <nav class="navbar navbar-default main_menu_wrapper">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <a href="{!! url('/') !!}" class="navbar-brand">
                            <img src="{!! asset("img/logo-for-site2.jpg") !!}">
                        </a>
                    </div>

                    <div class="collapse navbar-collapse menu_wrapper" id="bs-example-navbar-collapse-1">
                        <form action="{!! route('search') !!}" method="POST" role="search" class="navbar-form navbar-right search">
                            {{ csrf_field() }}

                            <div class="form-group">
                                <input type="text" class="form-control" name="search" placeholder="Search...">
                            </div>

                            <button type="submit" class="btn btn-default">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </form>

                        <ul class="nav navbar-nav navbar-right">
                            @foreach($menus_child as $grandfather)
                                @if($grandfather->menu_id)
                                    <li>
                                @elseif($grandfather->title == 'Home')
                                    <li class="parent {!! menu_active($grandfather->id) !!}">
                                @elseif(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
                                    <li class="dropdown {!! menu_active($grandfather->id) !!}">
                                @else
                                    <li class="parent {!! menu_active($grandfather->id) !!}">
                                @endif

                                @if(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
                                    <a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle hidden-xs hidden-sm hidden-md desktop_dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        {!! $grandfather->title !!} <span class="caret"></span>
                                    </a>

                                    <a href="javascript:void(0);" class="dropdown-toggle visible-xs visible-sm visible-md mobile_dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        {!! $grandfather->title !!} <span class="caret"></span>
                                    </a>
                                @else
                                    {!! Html::link(getSeoLink($grandfather->id), $grandfather->title) !!}
                                @endif

                                @if(count($grandfather->menusP))
                                    <ul class="dropdown-menu desktop">
                                        @foreach($grandfather->menusP as $father)
                                            @if($father->menu_id)
                                                <li class="parent_child">
                                            @else
                                                <li>
                                            @endif

                                            {!! Html::link(getSeoLink($father->id), $father->title) !!}
                                        @endforeach
                                    </ul>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
            </nav>
        <!-- END MENU SECTION -->

        <!-- BEGIN CONTENT SECTION -->
        @yield('content')
        <!-- END CONTENT SECTION -->

        <!-- BEGIN FOOTER SECTION -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 contact_wrapper">
                @include('contact::contact')
            </div>
        </div>
        <!-- END FOOTER SECTION -->


    </div>

Answer 1

我想我解决了。我做的是我在@yield('content')附近放了一个div，我添加了一些额外的css

html, body{
    height: 100%;
    width: 100%;

    margin: 0; /* Add css */
    padding: 0; /* Add css */
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 20px;

    min-height: 100%; /* Add css */
    position: relative; /* Add css */
}

.body-content{ /* Add css */
    padding-bottom: 234px; /* Add css */
}

.contact_wrapper {
    background: #fff none repeat scroll 0 0;
    height: 234px;
    position: absolute;
    bottom: 0; /* Add css */
}

让页脚停留在底部

1 个答案: