【发布时间】：2018-05-26 00:38:42
【问题描述】：
注意：代码使用 Jinja for python。
问题：
- 顶部的灰色导航/菜单栏不会像我的页脚一样填满页边距。
- 当鼠标悬停在菜单栏上时，黑色填充不会到达底部。
- 如果内容没有 100% 填满页面，我不希望滚动时必须向下滚动才能看到页脚。
编辑：
- 我还希望“主页”、“登录”、“注册”和“关于”等间距并且突出显示在四分之一处。但是，登录后有 5 个选项卡。因此，它必须是安全的。
感谢任何帮助。
导航栏不够宽： 必须滚动才能看到“主页”上的页脚和黑色悬停突出显示没有填充到底部：
下面的 HTML 代码链接到其他页面，如登录页面，但 CSS 和格式在这个 sn-p 中：
<!doctype html>
<title>{% block title %}{% endblock %} - Website</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<style>
html {
height: 100%;
box-sizing: border-box;
}
h1 {
font-family: "Verdana", serif;
font-size: 50px;
letter-spacing: 15px;
color: orange;
text-align: center;
}
body {
background-color: white;
border-left: 1px solid lightblue;
border-right: 1px solid lightblue;
width: auto;
position: relative;
padding-bottom: 6rem;
min-height: 100%;
margin-left: 7%;
margin-right: 7%;
font-family: "Open Sans", sans-serif;
padding: 5px 25px;
font-size: 18px;
color: blue;
}
header {
text-align: center;
}
nav {
background-color: #efefef;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.topnav li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 10px 60px;
font-size: 17px;
}
.topnav a:hover {
background-color: black;
color: white;
}
.topnav a.active {
background-color: black;
color: white;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
text-align: center;
}
footer nav ul li {
font-size: 5px;
}
</style>
<div id="header" class="topnav">
<section>
<header>
<div id="website-title">
<h1>Welcome</h1>
</div>
<div id="nav-bar">
<nav>
<ul id="navbar">
{% if g.user %}
<li><a href="{{ url_for('index') }}">Homepage</a></li>
<li><a href="{{ url_for('auth.account') }}">My account: {{ g.user['username'] }}</a></li>
<li><a href="{{ url_for('auth.logout') }}">Dashboards</a></li>
<li><a href="{{ url_for('auth.logout') }}">Log Out</a></li>
<li><a href="{{ url_for('auth.login') }}">About</a></li>
{% else %}
<li><a href="{{ url_for('index') }}">Homepage</a></li>
<li><a href="{{ url_for('auth.login') }}">Log In</a></li>
<li><a href="{{ url_for('auth.register') }}">Register</a></li>
<li><a href="{{ url_for('auth.login') }}">About</a></li>
{% endif %}
</ul>
</nav>
</div>
</header>
</section>
</div>
<div id="body">
<section class="content">
{% block head %}{% endblock %}
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
{% block content %}{% endblock %}
</section>
</div>
<div id="footer">
<footer>
<nav>
<ul>
<li>All rights reserved.</li>
<li>Sitemap</li>
</ul>
</nav>
</footer>
</div>
【问题讨论】：