Question

注意：代码使用Jinja进行python。

问题：

顶部的灰色导航栏/菜单栏不会像我的页脚那样填满页边距。
当鼠标悬停在菜单栏上时，黑色填充物不会到达底部。
如果内容不是100％填充页面，我不想滚动查看页脚。

编辑：

我也更喜欢＆＃39;主页＆＃39;，＆＃39;登录＆＃39;注册＆＃39; ＆安培; ＆＃39;关于＆＃39;间距相等，亮点为四分之一。但是，登录后有5个选项卡。因此，它需要是安全的。

感谢任何帮助。

导航栏不够宽：必须滚动才能看到页脚和＆amp;黑色悬停突出显示＆＃39;主页＆＃39;不填充到底部：

下面的HTML代码链接到其他网页，例如登录页面，但CSS和格式在此代码段中：

<!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>

Answer 1

您已使用

ul {
    display: inline-block;
}

你必须使用display:block并保存问题

对于footer问题，您必须提供body

max-height: 100%而不是min-height

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;
  max-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: 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>


<div id="header" class="topnav">
  <section>
    <header>
      <div id="website-title">
        <h1>Welcome</h1>
      </div>

      <div id="nav-bar">
        <nav>
          <ul id="navbar">
              <li><a href="{{ url_for('index') }}">Homepage</a></li>
              <li><a href="{{ url_for('auth.login') }}">Log In</a></li>


          </ul>
        </nav>
      </div>

    </header>
  </section>
</div>

<div id="body">
  <section class="content">
  <br/>
  </section>
</div>

<div id="footer">
  <footer>
    <nav>
      <ul>
        <li>All rights reserved.</li>
        <li>Sitemap</li>
      </ul>
    </nav>
  </footer>
</div>

Answer 2

要使您的导航全宽，只需删除<body>填充，例如将其更改为padding: 5px 0;。

关于填充颜色的问题..只需进行导航display: block

如果您想要删除滚动并将页面设为全高，请使用height: 100vh; <body>

以下是包含所有更改的fiddle

HTML CSS导航栏不够广泛＆amp;错误突出显示悬停

2 个答案: