设置为底部时可以滚动内容：0;

我有一个绝对div卡在相对div的底部。我想要做的就是让内部div可滚动（向上），只要它的大小比外部div大。设置为底部时可以滚动内容：0;

但这并未发生。该div不会滚动！这里的小提琴：https://jsfiddle.net/xggjmjqc/

HTML：

<div class="mobile1"> 
    <div class="bottom1"> 
    </div> 
</div> 

<br><br> 

<!-- when inner gets bigger than outer: --> 

<div class="mobile2"> 
    <div class="bottom2"> 
    </div> 
</div>

CSS：

.mobile1{ 
    height:400px; 
    width: 300px; 
    background-color: red; 
    position: relative 
} 

.bottom1{ 
    height:100px; 
    width: 300px; 
    position: absolute; 
    bottom: 0; 
    background-color: blue; 
} 

/* when inner gets bigger than outer: */ 

.mobile2{ 
    height:400px; 
    width: 300px; 
    background-color: red; 
    position: relative; 
    overflow-y: scroll; 
} 

.bottom2{ 
    height:500px; 
    width: 300px; 
    position: absolute; 
    bottom: 0; 
    background-color: blue; 
}

来源

2017-09-15 jonhz

使内部位置相对 – Daniel

如[此]（https://jsfiddle.net/ xggjmjqc/2 /）？ –

不能是相对的，因为这样它就不会粘在底部，以防它比外部（第一种情况）小。内部div的内容是一个变量，因此有时候可能会更小，有时可能更大。 – jonhz

使用位置absolute取出文档流的元素，这意味着它是存在的，不过是 “独立” 的从另一个元素。使用相对位置将使外部div响应内部，您的滚动将出现。

.bottom2{ 
    height:500px; 
    width: 300px; 
    position: relative; 
    bottom: 0; 
    background-color: blue; 
}

拨弄：https://jsfiddle.net/djwave28/xggjmjqc/3/

编辑随着一些JavaScript集滚动到下： https://jsfiddle.net/djwave28/xggjmjqc/6/

来源

2017-09-15 01:46:22 Daniel

是的，但如果它小于外部（第一种情况），它就不会粘在底部。内部div的内容是一个变量，因此有时候可能会更小，有时可能更大。 – jonhz

设置您在JavaScript中滚动到最大值。看看这里：https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div – Daniel

仍然不能解决问题，你可以看到，如果你设置bottom2的高度为300px，它不会坚持到底。 – jonhz

设置为底部时可以滚动内容：0;

回答

相关问题