Question

我有以下html

<div class="ex">
<div class="ex0">
<div class="ex1">
 <div class="ex2">
 ....
 </div>
 <div class="ex3">
 ....
 </div>
</div>
</div>
</div>

ex0绝对定位。 ex1，ex2，ex3相对定位。 ex0和ex1有溢出自动。 ex1的最小高度为480px;和ex2的高度为100％;

两个问题

我们如何确保ex3始终在div ex1的底部对齐？（我目前在ex2上使用最小高度，但我不想这样做。我尝试使用flexbox，但是当我这样做时盒子会变形。我尝试了绝对位置，但是当你使屏幕的高度变小时，div与其他人重叠。
当我使窗口的高度变小时，滚动不再有效。我无法向下滚动div。有谁知道为什么？它被卡住了1/4。

这里是CSS：

.ex {
   position: absolute;
   min-width: 1000px;
   min-height: 480px;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   z-index: 200;
   background: #262626;
}

.ex0 {
    box-sizing: border-box;
    position: absolute;
    display: block;
    width: 430px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    border-left: 2.5px solid #1c1c1c;
    overflow: auto;
}

.ex1 {
  position: relative;
  height: 100%;
  padding: 52.5px 65px 40px 50px;
  overflow: auto;
}

.ex2 {
    min-height: calc(100% - 250px);
}

.ex3 {
   position: relative;
   width: 100%;
}

Answer 1

对于第一个问题的答案，请通过以下更改来更改“ex3”课程。它会将ex3 div放在页面底部。

.ex3 {
    position: absolute;
    bottom: 0;
}

关于你的第二个问题。当我使用您提供的html和css创建演示时，滚动条显示在浏览器屏幕上。当我将屏幕调整为较小的高度时，滚动条会保留在页面上。

请检查jsfiddle link以了解更多信息。

Answer 2

删除.ex2并写入.ex3：

.ex3 {position: absolute; width: 100%; bottom: 0;}

滚动条应该可以工作！

如何垂直对齐底部的div并自动溢出

2 个答案: