Question

我有一个像这样的Blade主模板，它允许我使用一个模板来容纳许多不同的容器，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>
        @yield('title')
    </title>

    @include('libs.libs')
    @include('google.analytics')

</head>
<body>
    @include('partials.nav_sched')

    <div class="container">
        @yield('content')
    </div>

    @yield('schedule')

</body>
<div class="panel-footer navbar-bottom">
    @include('partials.footer-sched')
</div>
</html>
@include('js.libs')
@include('js.add-class')

问题是，我的页脚在页面中间位于上方：

这是我的partials/footer-sched：

<div class="container">
    <p class="text-muted text-center">
        Made with ♥ by Drexel Students for Drexel Students
    </p>
    <h6 class="text-muted text-center">
        <small>
            <a href="http://www.contact.com/contact-me/">Contact Me</a>
        </small>
    </h6>
</div>

我尝试了很多东西，例如使用自定义CSS将页脚从主体中取出：

.panel-footer{
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
  background-color: #ffffff;
}

我只是无法在页面底部放置页脚。我不想要一个粘性页脚，但我只想要一个停留在页面底部的页脚。

Answer 1

您可以在@Override protected void paintComponent(Graphics g){ super.paintComponent(g); g.setColor(Color.black); g.fillRect(0,0,x,y); }中使用bottom: 0; position: absolute，但这不适合所有情况。

我认为有两个简单的解决方案。

像.panel-footer一样修改@yield()部分。
在您的css文件中添加min-height:600px。

无论如何..你必须修改如下代码：

body { min-height: 800px; }

我希望你能解决问题。： - ）

Answer 2

您可以尝试将其添加到.panel-footer CSS：请参阅工作示例。

position: absolute;
right: 0;
bottom: 0;
left: 0;

＆＃13;

/**Styling: Non-Footer Related**/

h1 {
  text-align: center;
}
.icon-up {
  position: absolute;
  right: 15px;
  bottom: 15px;
  color: white;
}
.icon-circle {
  position: relative;
  background: red;
  padding: 20px;
  border-radius: 50%;
}
/**Styling: Footer Related**/

div.panel-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
  background-color: #ffffff;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <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 class="navbar-brand" href="#">Brand</a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <h1>Search for Class</h1>



  <input type="text" class="form-control" placeholder="Search for...">


</div>
<div class="panel-footer">
  <div class="container">
    <p class="text-muted text-center">Made with ♥ by Drexel Students for Drexel Students</p>
    <h6 class="text-muted text-center">
        <small>
            <a href="http://www.contact.com/contact-me/">Contact Me</a>
        </small>
    </h6>

  </div>
</div>
<span class="icon-up">
    
        <i class="fa fa-calendar icon-circle"></i>
    
</span>

<!-- /top-link-block -->

＆＃13;

Bootstrap页脚位于页面中间

2 个答案: