Question

我做了很多搜索，但我没有找到类似的案例。

上下文：我有一个包含另一个div（div-2）的div（div-1）。我想div-2总是位于div-1的内部和底部，即使在滚动时也是如此。更多，即使在div-1中滚动，div-2也必须始终是可见的。

我测试过位置：已修复，但div-2超出了div-1。我认为解决方案必须用jQuery编写，但我不知道如何处理它

感谢您的帮助

Answer 1

不需要JQuery，只需要CSS：

将<div id="owl-carousel-257654226" class="owl-carousel owl-carousel-jumbo owl-theme" data-singleitem="true" data-autoplay="10000" data-stoponhover="true" data-pagination="false" data-navigation="true" style="opacity: 1; display: block;">.....</div>放在position: relative上以及div-1上的以下内容：

div-2

示例小提琴：https://jsfiddle.net/ynx0hpy4/2/

Answer 2

您可以在position: sticky课程中使用.div-2，如下所示：

.div-1 {
  height: 200px;
  width: 300px;
  border: 1px solid #000;
  position:relative;
  overflow-y:scroll;
}
.div-2{
  position: sticky;
  bottom:0;
  left:0;
  right: 0;
  height: 40px;
  background: black;
  color:#fff;
}

<div class="div-1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a turpis at nisi congue suscipit. Vestibulum lobortis aliquam nisl, in dictum dui blandit quis. Cras facilisis, sem et placerat dapibus, lectus leo bibendum enim, sed mollis eros mi at nibh. Nullam venenatis ultricies tortor, vel accumsan lacus ultrices in. Maecenas non ligula ut ex ultricies elementum. Suspendisse dictum odio sollicitudin, convallis neque non, facilisis sem. Mauris imperdiet fringilla nulla vitae auctor. Vivamus molestie ligula ac nisi luctus viverra. Sed vestibulum tortor in volutpat congue. In finibus, mi ut congue sollicitudin, velit lectus scelerisque enim, eget viverra dolor velit quis ex. Nam sodales, ex sit amet cursus porta, odio tortor fermentum lacus, ac semper lectus leo sit amet turpis.
  ligula ac nisi luctus viverra. Sed vestibulum tortor in volutpat congue. In finibus, mi ut congue sollicitudin, velit lectus scelerisque enim, eget viverra dolor velit quis ex. Nam sodales, ex sit amet cursus porta, odio tortor fermentum lacus, ac semper lectus leo sit amet turpis.
  <div class="div-2">Fixed</div>
</div>

Answer 3

您可以通过考虑justify-content属性来使用flex：

body {
  margin: 0;
}

.div1 {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: green;
  justify-content: flex-end; /* this will push the div to the bottom */
}

.div2 {
  min-height: 50px;
  background: blue;
}

<div class="div1">
  <div class="div2"></div>
</div>

或者通过添加包含您的内容的div并按下这样推送另一个：

body {
  margin: 0;
}

.div1 {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: green;
}
.content {
  flex:1; /* this div will take all the remaing space and push the div2 to the bottom */
}
.div2 {
  min-height: 50px;
  background: blue;
}

<div class="div1">
  <div class="content"></div>
  <div class="div2"></div>
</div>

Answer 4

你不能只用两个div来做，但你可以用三个做到这一点：

＆＃13;

* {margin: 0}

#div1 {
  width: 100vw;
  height: 100vh;
}

#div2 {
  height: 50px;
  background: Salmon;
}

#div3 {
  height: calc(100vh - 50px); /* div1's height - div2's height */
  overflow-x: auto;
  background: Khaki;
}

＆＃13;

<div id="div1">
  <div id="div3">
    <p style="height: 1234px">content...</p>
  </div>
  <div id="div2">bottom...</div>
</div>

＆＃13;

位置sticky由于目前浏览器支持不佳而无法计算。

如何在底部制作一个div并固定在另一个div中

4 个答案: