Question

所以这可能相对简单，但我在这里显然遗漏了一些东西。我可能已经看了太久了。我试图让导航菜单转到屏幕的底部。截至目前，它只能下降到适合所有导航链接所需的空间。

我试图让盒子自己到达屏幕的底部，而不是第7个导航链接。因此，第7个导航链接不应该向下伸展以适应（它应该保持其填充大小）......包含它的框应该。

HTML

<nav class="navigation">
   <ul>
      <li class="logo"><h1><a id="nav_logo" href="/index.php">Title</a></h1></li>
      <li><a class="nav_link" href="#">1</a></li>
      <li><a class="nav_link" href="#">2</a></li>
      <li><a class="nav_link" href="#">3</a></li>
      <li><a class="nav_link" href="#">4</a></li>
      <li><a class="nav_link" href="#">5</a></li>
      <li><a class="nav_link" href="#">6</a></li>
      <li><a class="nav_link" href="#">7</a></li>                           
   </ul>
</nav>

CSS

*{
   margin: 0;
   padding: 0;
}

html,body{
   font-family: 'PT Sans', sans-serif;
   background-color: pink;
   color: white;
}

#wrapper{
   margin: 0 auto;
   min-width: 320px;
   max-width: 1600px;
}

h1,h2,h3,h4,h5,h6{
   color:#FEBC11;
   text-align: center;
}

nav{
   width: 100%;
}

nav a{
   display: block;
   color: white;
   text-decoration: none;
   padding: .5rem; 0rem;
   border-bottom: 1px solid red;
}

nav .nav_link{
   text-align: center;
   background-color: blue;
   width: 240px;
}

nav #nav_logo{
   border-bottom: none; 
   background-color: transparent;
   text-decoration: none;
   color:#FEBC11;
}

nav .logo h1{
   text-align: left;
   padding-left: .5rem; 
   font-size: 1rem;
   padding-bottom: .5rem;
   padding-top: .5rem;
   background-color: #333;
}

nav a:hover{
   text-decoration: underline;
}

nav a.current{
   background-color: black;  
}

有人告诉我，我错过了什么傻事，请XD

https://jsfiddle.net/yoxgksp3/

编辑：我可能应该提到，我想将标题栏保留在屏幕顶部。这张图片应该有助于实现它。这与我的无关，但有助于显示http://imgur.com/iIIiNKr

Answer 1

* {
  margin: 0;
  padding: 0;
}
html,
body {
  font-family: 'PT Sans', sans-serif;
  background-color: pink;
  color: white;
}
#wrapper {
  margin: 0 auto;
  min-width: 320px;
  max-width: 1600px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #FEBC11;
  text-align: center;
}
nav {
  position: absolute;
  bottom: 0;
  width: 100%;
}
nav a {
  display: block;
  color: white;
  text-decoration: none;
  /* remove underline */
  padding: .5rem;
  0rem;
  border-bottom: 1px solid red;
}
nav .nav_link {
  text-align: center;
  /* center all the links but the KACM */
  background-color: blue;
  width: 240px;
}
nav #nav_logo {
  border-bottom: none;
  /* remove border bottom from KACM */
  background-color: transparent;
  text-decoration: none;
  color: #FEBC11;
}
nav .logo h1 {
  text-align: left;
  padding-left: .5rem;
  /* moves KACM to the right from the border */
  font-size: 1rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
  background-color: #333;
}
nav a:hover {
  text-decoration: underline;
}
nav a.current {
  background-color: black;
}

<h1><a id="nav_logo" href="#">Title</a></h1>
<nav class="navigation">
  <ul>
    <li><a class="nav_link" href="#">1</a>
    </li>
    <li><a class="nav_link" href="#">2</a>
    </li>
    <li><a class="nav_link" href="#">3</a>
    </li>
    <li><a class="nav_link" href="#">4</a>
    </li>
    <li><a class="nav_link" href="#">5</a>
    </li>
    <li><a class="nav_link" href="#">6</a>
    </li>
    <li><a class="nav_link" href="#">7</a>
    </li>
  </ul>
</nav>

Answer 2

移动标题＆lt; li＆gt;到＆lt; header＆gt;在＆lt; nav＆gt;之外。
更新 css将nav #nav-logo替换为header #nav-logo以及以前导航的其他事件（现在标题）
添加此css 规则：

nav ul{
   float: left;
   background: blue;
   height: 100vh;
}

和如果 不希望滚动，请在overflow: hidden css规则中添加html, body

这是代码：

*{ margin: 0; padding: 0; } html,body{ font-family: 'PT Sans', sans-serif; background-color: pink; color: white; overflow: hidden; } #wrapper{ margin: 0 auto; min-width: 320px; max-width: 1600px; } h1,h2,h3,h4,h5,h6{ color:#FEBC11; text-align: center; } nav ul{ float: left; background: blue; height: 100vh; } nav a{ display: block; color: white; text-decoration: none; /* remove underline */ padding: .5rem; 0rem; border-bottom: 1px solid red; } nav .nav_link{ text-align: center; /* center all the links but the KACM */ background-color: blue; width: 240px; } header #nav_logo{ border-bottom: none; /* remove border bottom from KACM */ background-color: transparent; text-decoration: none; color:#FEBC11; } header.logo h1{ text-align: left; padding-left: .5rem; /* moves KACM to the right from the border */ font-size: 1rem; padding-bottom: .5rem; padding-top: .5rem; background-color: #333; } nav a:hover{ text-decoration: underline; } nav a.current{ background-color: black; }

<header class="logo"><h1><a id="nav_logo" href="/index.php">Title</a></h1></header> <nav class="navigation"> <ul> <li><a class="nav_link" href="#">1</a></li> <li><a class="nav_link" href="#">2</a></li> <li><a class="nav_link" href="#">3</a></li> <li><a class="nav_link" href="#">4</a></li> <li><a class="nav_link" href="#">5</a></li> <li><a class="nav_link" href="#">6</a></li> <li><a class="nav_link" href="#">7</a></li> </ul> </nav>

导航不会触及屏幕底部

2 个答案: