Question

将overflow:auto添加到垂直居中的“菜单项”并减小屏幕高度时，顶部的“菜单项”不会一直滚动到顶部。请参见小提琴和下面的图像。

任何使元素垂直滚动但仍保持垂直居中的想法。最好仅在可能的情况下在CSS中使用。

.menu {
  background: red;
  height: 100%;
  width: 50%;
  position: fixed;
  overflow: auto;
}

.menu-items {
  display: flex;
  align-items: center;
  height: 100%;
}

li {
  font-size: 30px;
}

.first-item {
  background: blue;
}

<div class="menu">
  <div class="menu-items">
    <ul>
      <li class="first-item">Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
      <li>Menu Item 4</li>
      <li>Menu Item 5</li>
      <li>Menu Item 6</li>
      <li>Menu Item 7</li>
      <li>Menu Item 8</li>
      <li>Menu Item 9</li>
      <li>Menu Item 10</li>
    </ul>
  </div>
</div>

Answer 1

您的.menu项应包含min-height而不是height

.menu {
  background: red;
  height: 100%;
  width: 50%;
  position: fixed;
  overflow: auto;
}

.menu-items {
  display: flex;
  align-items: center;
  min-height: 100%;
}

li {
  font-size: 30px;
}

.first-item {
  background: blue;
}

<div class="menu">
  <div class="menu-items">
    <ul>
      <li class="first-item">Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
      <li>Menu Item 4</li>
      <li>Menu Item 5</li>
      <li>Menu Item 6</li>
      <li>Menu Item 7</li>
      <li>Menu Item 8</li>
      <li>Menu Item 9</li>
      <li>Menu Item 10</li>
    </ul>
  </div>
</div>

Answer 2

我认为您想要的是这种变化：

将.menu-items的CSS规则更改为此：

.menu-items {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Answer 3

删除位置：固定； 解决了问题

Answer 4

好的，所以我检查了您的代码，但看起来没有什么错。我认为这是一个分辨率问题（jsFiddle编译器仅是半页的分辨率，而堆栈溢出摘要编译器仅是一页的1/20）。在这里，我通过添加br元素修改了您的代码。尝试以全屏模式运行以下代码。

<div class="menu">
  <div class="menu-items">
   <br>
    <ul>
      <li class="first-item">Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
      <li>Menu Item 4</li>
      <li>Menu Item 5</li>
      <li>Menu Item 6</li>
      <li>Menu Item 7</li>
      <li>Menu Item 8</li>
      <li>Menu Item 9</li>
      <li>Menu Item 10</li>
    </ul>
  </div>
</div>

<!doctype html>
<html>

<head>
  <style>
    .menu {
      background: red;
      height: 100%;
      width: 50%;
      position: fixed;
      overflow: auto;
    }
    
    .menu-items {
      display: flex;
      align-items: center;
      height: 100%;
    }
    
    li {
      font-size: 30px;
    }
    
    .first-item {
      background: blue;
    }
    
    <div class="menu"><div class="menu-items"><ul><li class="first-item">Menu Item 1</li><li>Menu Item 2</li><li>Menu Item 3</li><li>Menu Item 4</li><li>Menu Item 5</li><li>Menu Item 6</li><li>Menu Item 7</li><li>Menu Item 8</li><li>Menu Item 9</li><li>Menu Item 10</li></ul></div></div>
  </style>
</head>

<body>
  <div class="menu">
    <div class="menu-items">
      <ul>
        <li class="first-item">Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
        <li>Menu Item 4</li>
        <li>Menu Item 5</li>
        <li>Menu Item 6</li>
        <li>Menu Item 7</li>
        <li>Menu Item 8</li>
        <li>Menu Item 9</li>
        <li>Menu Item 10</li>
      </ul>
    </div>
  </div>
</body>

</html>

如果这对您不起作用，请在评论中回复我，因为您的解释不清楚...

溢出：自动元素在垂直居中的元素中无法正确滚动

4 个答案: