将 div 放置在底部，并在上面放置可滚动的兄弟答案

【问题标题】：Position div at the bottom with scrollable sibling above将 div 放置在底部，并在上面放置可滚动的兄弟
【发布时间】：2021-11-27 01:08:36
【问题描述】：

<div class="menu__content" style="max-height: 100px; min-width: 410px; overflow-x: scroll">
    <div class="card" style="height: auto;">
    <div class="list">
    <div>
   <a class="list__tile list__tile--link">
      <div>
         <div>
            <div>a</div>
            <div>a</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>b</div>
            <div>b</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>c</div>
            <div>c</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>d</div>
            <div>d</div>
         </div>
      </div>
   </a>
</div>
</div>
<div class="results">
   <a>
   <div>
      <div>
         <div>6 results</div>
      </div>
   </div>
</div>

我有这个结构

<div class="menu__content" style="max-height: 300px; min-width: 410px;">
    <div class="card" style="height: auto;">
    <div class="list">
    <div>
   <a class="list__tile list__tile--link">
      <div>
         <div>
            <div>a</div>
            <div>a</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a class="list__tile list__tile--link">
      <div>
         <div>
            <div>b</div>
            <div>b</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a class="list__tile list__tile--link">
      <div>
         <div>
            <div>c</div>
            <div>c</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a class="list__tile list__tile--link">
      <div>
         <div>
            <div>d</div>
            <div>d</div>
         </div>
      </div>
   </a>
</div>
</div>
<div class="results">
   <a class="list__tile list__tile--link">
   <div>
      <div>
         <div>6 results</div>
      </div>
   </div>
</div>

<div class="list"> 中的元素位于可滚动窗口中，我希望 <div class="results"> 具有粘性底部，但无法弄清楚如何正确定位它。目前它只是与其余项目一起向下滚动。在这种情况下，正确的 css 是什么？我添加了一个 sn-p 来显示确切的问题

【问题讨论】：

请您展示您的相关 CSS 并将您的代码变成我们可以运行的 sn-p。还有，你要坚持到底是什么？

标签： html css css-position sticky-footer

【解决方案1】：

body {
  font-family: sans-serif;
}
.list {
  background-color: yellow;
  overflow: scroll;
  max-height: 180px;
}
.results {
  position: sticky;
  bottom: 0;
  background-color: cyan;
}

<div class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div class="results">total results: 16</div>
</div>

这里是source article，它解释了如何使用position: sticky;

【讨论】：

我的结构不同，我无法控制它——它是一个第三方控制器，我可以在某种程度上进行编辑

【解决方案2】：

您的结构可能不同，但您需要的 CSS 正是我发布的。

body {
  font-family: sans-serif;
}
.list {
  background-color: yellow;
  overflow: scroll;
}
.results {
  position: sticky;
  bottom: 0;
  background-color: cyan;
}

<div class="menu__content" style="max-height: 100px; min-width: 410px; overflow-x: scroll">
    <div class="card" style="height: auto;">
    <div class="list">
    <div>
   <a class="list__tile list__tile--link">
      <div>
         <div>
            <div>a</div>
            <div>a</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>b</div>
            <div>b</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>c</div>
            <div>c</div>
         </div>
      </div>
   </a>
</div>
<div>
   <a>
      <div>
         <div>
            <div>d</div>
            <div>d</div>
         </div>
      </div>
   </a>
</div>
</div>
<div class="results">
   <a>
   <div>
      <div>
         <div>6 results</div>
      </div>
   </div>
</div>

【讨论】：