【发布时间】：2018-06-30 12:37:25
【问题描述】：
我正在为我的 Django 应用程序的前端使用物化 css 框架。除了一种行为外，一切都很好。我希望页脚位于屏幕底部（不是页面 - 我想要一个固定页脚，而不是粘性页脚）。
我在<header><main><footer> 布局中有我的html，但也许我遗漏了什么？我已经包含了我的基本 html 模板。我不太确定我哪里出错了，或者我现在应该调整什么！
请注意：我使用的是 Materialise 1.0 Alpha。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title> See List | app</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="E:/code/app/app/static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="E:/code/app/app/static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<style>
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
}
table.highlight tbody tr:hover {
background-color: #fffaef !important;
}
.row {
width: 100%;
}
th.result td.result {
border-left-style: solid;
border-left-color: #eee;
border-left-width: 1px;
}
table.striped > tbody > tr.winner{
background-color: #d0edbd;
}
table.striped > tbody > tr:nth-child(odd).winner{
background-color: #d5f4c1;
}
</style>
</head>
<body>
<header>
<ul id="script-dropdown" class="dropdown-content">
<li><a class="disabled" href="#">Scripts</a></li>
<li><a href="/app/run/get_games/">Get</a></li>
<li><a href="/app/run/add_openers/">Add Opening</a></li>
<li><a href="/app/run/add_closing/">Add Closing</a></li>
<li><a href="/app/run/close_games/">Close</a></li>
<li><a class="disabled" href="/app/run/movement/">Rerun</a></li>
</ul>
<div class="navbar-fixed">
<nav class="deep-purple darken-4" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo" ><i class="material-icons left">casino</i>
APP
</a>
<ul class="right hide-on-med-and-down ">
<li><a href="#"></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="script-dropdown">Scripts<i class="material-icons left">code</i></a></li>
<li><i class="material-icons left">access_time</i>Sunday, 21 January 2018 18:09 EST</li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<div class="container" style="width: 90%; max-width: none;">
<div class="row">
<div class="col s12 valign center-block">
<h2 class="center-align">Filters Go Here</h2>
</div>
<div class="row">
<div class="col s12 m12 l12">
<table class="striped responsive-table highlight">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr >
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer teal darken-4">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">To the Admin Site</h5>
</div>
<div class="col l3 s12">
<h5 class="white-text">Lists</h5>
<ul>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Scripts</h5>
<ul>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by jenni
</div>
</div>
</footer>
</body>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="E:/code/app/app/static/js/materialize.js"></script>
<script src="E:/code/app/app/static/js/init.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-trigger").dropdown();
});
</script>
【问题讨论】：
-
考虑添加框架的输出（进入浏览器的内容）。要获取它，只需在页面中右键单击“查看源代码”即可。
-
其中一些是敏感的。我可以更新一些，但结构适合 3 个标签。让我看看我能不能抓住一个更简单的页面。
-
当我说“输出”时，我并不是指整个来源。您仍然应该将其限制为minimal reproducible example。我建议的内容与您目前拥有的内容之间的区别在于，这里的任何人都可以验证（可检查），并且他们不需要您的框架来回答。不要忘记添加来自 CDN 的资源，以便在此处重现您的问题。
-
这是负 51.5k 行。我想我可以把它拉得更远。
-
{% load static %}和{% block jscripts %}{% endblock %}不是有效的 HTML。这是您的框架编译成有效 HTML 的东西。用它被解析的任何内容替换它。您可以查看页面源并从那里获取它。希望我说的很清楚。
标签： css django-templates footer materialize