时间戳

首页 > 解决方案 > 自动滚动打破高度限制

css - 自动滚动打破高度限制

问题描述

破损高度

溢出时的外观：自动未激活

因此，我的高度工作得很好，因为它填充了 100vh 应用程序容器的剩余空间（蓝色边框线），但是当我添加 overflow: auto 到 .action-list 并添加了足够的项目时，它需要溢出来突然激活高度突破了应用程序容器并推过了视口的底部。我已经尝试了 .action-list 的所有高度操作，但都无济于事。如果我将 .action-container 或 .action-plate 更改为较小的高度百分比，我能够使整个事情完美契合，但如果溢出：auto 未激活，则会将高度破坏为太小。我无计可施。

（.app 位于单独的 css 文件中。所有彩色边框均包含在内，仅供参考。）

.app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border: 1px blue solid;
}

.app-container {
    margin: 0 0 30px 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    border: 1px solid green;
}

.action-plate {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
}

.action-container {
    width: 85%;
    height: 89%;
    background: black;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #9A070E, #9e4676, #f98a2f93);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4e080b63, #77335a48, #b6662457); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 2px 1px 18px rgb(202, 202, 202);
    border: 1px thistle solid;
}

.action-list {
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
}

.add-item {
    margin: 10px;
    box-sizing: border-box;
}

标签： cssflexboxheightoverflowviewport

解决方案

使您的列表容器灵活，flex-grow以填充可用空间，并更改默认值min-height: auto以允许列表容器缩小。

查看您的 HTML 标记将有助于理解这里发生了什么。但它似乎.action-plate无法解决它的问题height: 100%，所以它的行为与想象height的一样auto，在这种情况下，这意味着它会尝试根据其内容的高度来调整自己的大小。这就是为什么它变得如此之大，而不是留在它的100vh容器中。

要获得您想要的效果，您可以利用 Flexbox 属性而不是使用百分比。

标题和选项卡应该是它们内容的大小，所以我们不需要在那里做任何额外的事情。

列表的容器应该占用应用程序容器中的所有剩余空间——不多也不少。为了确保它增长以填充可用空间，我们设置flex-grow: 1（默认情况下弹性项目有flex-grow: 0）。

接下来，弹性项目将尝试min-content默认保持其大小。这基本上意味着您的弹性项目将尝试至少具有包含其所有项目的大小。这就是它超越应用容器的原因。

min-height: auto所以我们将给它而不是它的默认值min-height: 0。这意味着如果你有很多内容，你的弹性项目将不再试图“保护”它的大小，并且会缩小以填充容器的大小。

这是一个工作示例：

body {
  margin: 0;
  color: white;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 320px; /* just to illustrate the working example */
  height: 480px; /* just to illustrate the working example */
  box-sizing: border-box;
  background-color: black;
}

header {
  text-align: center;
}

.nav-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  justify-content: space-evenly;
}

.todo-list-container {
  flex-grow: 1;
  padding: 16px;
  min-height: 0;
  overflow: auto;
}

.todo-list-content {
  background-color: burlywood;
}

.todo-item {
  font-size: 32px;
}
<main class="app">
  <header><h1>Exist Better</h1></header>
  <nav>
    <ul class="nav-list">
      <li>Routines</li>
      <li>Behaviors</li>
      <li>To Dos</li>
    </ul>
  </nav>
  <div class="todo-list-container">
    <div class="todo-list-content">
      <ul class="todo-list">
        <li class="todo-item">Routine 1</li>
        <li class="todo-item">Routine 2</li>
        <li class="todo-item">Routine 3</li>
        <li class="todo-item">Routine 4</li>
        <li class="todo-item">Routine 5</li>
        <li class="todo-item">Routine 6</li>
        <li class="todo-item">Routine 7</li>
        <li class="todo-item">Routine 8</li>
        <li class="todo-item">Routine 9</li>
        <li class="todo-item">Routine 10</li>
      </ul>
      <button>Add a new routine</button>
    </div>
  </div>
</main>

推荐阅读