Html 具有滚动条的div中垂直对齐的div

看看这个

HTML:

CSS:

#外部{
背景色：#1abc9c；
高度：400px；
位置：相对位置；
溢出：自动；
}
#内在的{
背景色：#16a085；
高度：250px；
宽度：250px；
位置：绝对位置；
保证金：自动；
排名：0；
左：0；
右：0；
底部：0；
}
#内部ul{
保证金：0；
}
#内乌尔里{
线高：25px；
}

我有一个div（内部）在另一个div（外部）内垂直对齐。。。它就像一个符咒

如果外部div小于内部div，则必须进行滚动。您可以在示例底部看到这个单击按钮

问题是：滚动隐藏了内部div的顶部。您无法滚动显示第一行

我把css改成了div的中心，运气不好

---

任何提示？

您可以避免使用绝对定位进行垂直对齐，这会将元件从正常流动中移除，而使用1：

#外部{文本对齐：居中；}
#外部：之后{
内容：“；
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
#内在的{
背景色：#16a085；
高度：250px；
宽度：250px；
显示：内联块；
垂直对齐：中间对齐；
}

---

一,。您可以参考该答案的“垂直对齐”部分，以实现盒子的水平和垂直对齐。

尝试以下方法：

CSS

#inner {
    background-color: #16a085;
    position: relative;
    height: 250px;
    width: 250px;
    margin: auto;
    top: 75px;
    left: 0;
    right: 0;
    bottom: 0;
}

toggleOuterHeight = function() {
    if ($('#outer').css('height') == '400px') {
        $('#outer').css('height','200px');
        $('#inner').css('top','0');
    } else {
        $('#outer').css('height','400px');
        $('#inner').css('top','75px');
    }
}

JS

#inner {
    background-color: #16a085;
    position: relative;
    height: 250px;
    width: 250px;
    margin: auto;
    top: 75px;
    left: 0;
    right: 0;
    bottom: 0;
}

toggleOuterHeight = function() {
    if ($('#outer').css('height') == '400px') {
        $('#outer').css('height','200px');
        $('#inner').css('top','0');
    } else {
        $('#outer').css('height','400px');
        $('#inner').css('top','75px');
    }
}

---

链接到

您可以添加一个类，如您所知，高度使用负边距：

JS:

CSS:

toggleOuterHeight = function() {
    if ($('#outer').css('height') == '400px') {
        $('#outer').css('height','200px').addClass('scrolly');
    } else {
        $('#outer').css('height','400px').removeClass('scrolly');
    }
}

#inner {
    background-color: #16a085;
    height: 250px;
    width: 250px;
    position: absolute;
    margin: auto;
    margin-top: -125px;
    top: 50%;
    left: 0;
    right: 0;
    /* bottom: 0; */
}

#inner ul {
    margin: 0;
}
.scrolly #inner {
    margin-top: 0;
    top: 0;
}