调整浏览器窗口大小时，块元素变大并且不保持垂直居中

Question

我正在尝试使用侧边栏导航菜单构建一个响应式网站。在我开始构建和设计导航菜单之前，一切工作一直很顺利。看起来我希望它在全尺寸的浏览器窗口中显示，但是在调整大小使其更小时，与页面的其余部分相比，块元素开始变大，并且文本不会居中。我可能犯了一个愚蠢的错误，因为我刚接触CSS。

我希望导航栏的高度与包含文本的页面部分的高度相同，因此我将所有内容用背景颜色绿色封装在<div>中，然后将包含文本的div浮动为右侧为白色背景，左侧为包含导航链接的div。这是导航链接的HTML和CSS代码的示例：

<div id="navigation">   
    <ul>        
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
    </ul>
</div>

---

#navigation {
    list-style-type: none;
    padding-top: 2vw;
    width: 15%;
    float: left;
}

#navigation a {
    font-size: 1.2vw;
    text-decoration: none;
    color: white;
    display: block;
    padding-left: 2vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    padding-right: 0.5vw;
    vertical-align: middle;
}

我希望块元素与页面的其余部分一起调整大小，并使其中的链接垂直居中。我在做错什么吗？

Here's a comparison between the view in a normal sized window and the view in a smaller one

Answer 1

这可以通过多种方式实现，但是最简洁的方法可能是在CSS中使用flexbox或grid布局。

像这样？ （使用flexbox）：

.layout {
  /* Use flex layout */
  display: flex;
  /* make the layout use the full viewport height */
  min-height: 100vh;
}

.main {
  /* Make the main element grow */
  flex: 1;
  padding: 1em;
}

.nav {
  /* Center children vertically */
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* Keep the nav width at 15% */
  flex-basis: 15%;
  list-style-type: none;
  padding: 1em;
  background: green;
  color: white;
}

.nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: white;
}

<div class="layout">
  <nav class="nav">
    <ul class="menu">        
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
    </ul>
  </nav>
  <main class="main">
    Content ...
  </main>
</div>