Question

我需要创建一个高度不可更改的4张卡片，底部带有按钮，但是每张卡片中的文字量不同。

Position Fixed连接到body元素，用内容定位绝对滚动，内容结束时出现位置粘性。

https://codepen.io/anatoli101/pen/NVzbGY这是我的问题的一个基本示例

.content{
  display:flex;
  width: 100%;
  justify-content: space-around;
}

.fixed-div{
  background-color: red;
  height: 400px;
  width: 300px;
  overflow-y: auto;
}

.button{
  position:sticky;
  bottom:0;
  background-color: grey;
  width: 100%;
  height: 30px;
}

Answer 1

实现此目的的一种好方法是将具有fixed-div类的元素包装在容器中，并将具有button类的元素移动到具有fixed-div类的元素之外，因此它是容器元素的直接子代。然后，您可以将position: relative设置为容器元素，并将position: absolute设置为具有类button的元素。由于容器元素的大小（特别是高度）与类别为fixed-div的元素完全相同，因此类别为button的元素将位于其底部。

您还需要在类fixed-div的元素上添加底部填充，以使按钮不会隐藏其内容，并且不会影响其定义的高度，您可以设置其box-sizing属性为border-box。

请参见以下代码：

.content {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.container {
  position: relative;
}

.fixed-div {
  box-sizing: border-box;
  width: 150px;
  height: 400px;
  padding-bottom: 30px;
  overflow-y: auto;
  background-color: red;
}

.button {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: grey;
}

<h1>I need grey area fixed on the bottom, non depending of text ammount  </h1>
<div class="content">
  <div class="container">
    <div class="fixed-div">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
    </div>
    <div class="button"></div>
  </div>

  <div class="container">
    <div class="fixed-div">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum.</p>
    </div>
    <div class="button"></div>
  </div>

  <div class="container">
    <div class="fixed-div">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
    </div>
    <div class="button"></div>
  </div>

  <div class="container">
    <div class="fixed-div">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae? </p>
    </div>
    <div class="button"></div>
  </div>
</div>

我减小了文本元素的宽度，使其可以在狭窄的容器中工作，如果仍然太窄，则可以在整个页面中运行代码。

将按钮保留在滚动元素内，并将position: relative设置为后者，将position: absolute设置为前者将不起作用，因为按钮的底部将位于滚动元素内的{{1 }}，即滚动元素的高度，并会与其内容一起滚动。

希望有帮助。

Answer 2

使用flex：您会得到更好的结果（没有阻塞的滚动条）

.content {
  display: flex;
  justify-content: space-evenly;
  height: 400px;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 0 1 250px;
  margin: 0 5px;
}

.fixed-div {
  background-color: red;
  overflow-y: auto;
  flex: 1 1 auto;
}

.button {
  background-color: grey;
  flex: 0 0 30px;
}

<h1>I need grey area fixed on the bottom, not dependent on text amount</h1>
<div class="content">
  <div class="container">
    <div class="fixed-div">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
    </div>
    <div class="button"></div>
  </div>

  <div class="container">
    <div class="fixed-div">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
    </div>
    <div class="button"></div>
  </div>

  <div class="container">
    <div class="fixed-div">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est </p>
    </div>
    <div class="button"></div>
  </div>

  <div class="container">
    <div class="fixed-div">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
    </div>
    <div class="button"></div>
  </div>
</div>

Answer 3

您可以尝试代码：

.fixed-div p{
   display: block;
   margin: 0;
   padding: 10px;
   height: 350px;
}

这是一个演示：https://codepen.io/phuongnm153/pen/zQaobq

Answer 4

将position: relative;用作父项（固定div），将position:absolute;bottom:0;用作子项（按钮）

Answer 5

.content{
  display:flex;
  width: 100%;
  justify-content: space-around;
}

.fixed-div{
    position: relative;
    background-color: green;
    height: 400px;
    width: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.button{
  position:relative;
  background-color: grey;
  width: 100%;
  height: 30px;
  display: inline-table;
}

将固定div固定在可滚动div的底部

5 个答案: