HTML CSS导航栏不够宽，高亮悬停显示错误

Question

注意：代码将Jinja用于python。

问题：

顶部的灰色导航/菜单栏不会像我的页脚一样填满边距。
当鼠标悬停在菜单栏上时，黑色填充不会到达底部。
如果内容不是100％填充页面，我不希望滚动时，必须向下滚动才能看到页脚。

编辑：

我还希望“主页”，“登录”，“注册”和“关于”等距隔开，并且突出显示在每半部分。 但是，登录后有5个选项卡。 因此，这样做应该是安全的。

任何帮助表示赞赏。

导航栏不够宽： 必须滚动才能看到“首页”上的页脚和黑色悬停突出显示内容没有填充到底部：

下面的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 max-height: 100%

 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>

这是所有变化的小提琴

HTML CSS导航栏不够宽，高亮悬停显示错误

问题描述

2 个解决方案

解决方案1
1 2018-05-26 01:04:49

解决方案2
1 已采纳 2018-05-26 01:08:26

HTML CSS导航栏不够宽，高亮悬停显示错误

问题描述

2 个解决方案

解决方案1 1 2018-05-26 01:04:49

解决方案2 1 已采纳 2018-05-26 01:08:26

解决方案1
1 2018-05-26 01:04:49

解决方案2
1 已采纳 2018-05-26 01:08:26