想要的结果是
第二个 div 内的 div 应该总是有
overflow-y 滚动
。底部的按钮应该始终贴在窗口底部
这个结构应该是响应式的,即使在调整大小时也应该保持这样。
我愿意使用 bootstrap 或解决此问题的东西
.border {
border: 1px solid
}
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 716px; overflow-y: scroll; margin-top: 20px">
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
<div class="border" style="height: 79px;">
</div>
</div>
<button style="width: 100%">This button should stick to bottom</button>
最佳答案
您可能需要使用额外的 div 获得窗口内的所有空间,因为容器广告将其粘贴到边缘(顶部/左侧/右侧/高度 = 0 像素)!
您甚至可能需要制作容器 overfolow:none
以供将来使用!
使用 CSS 函数“calc”计算的可滚动 div 的高度如下:
.container {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
margin: 10px;
}
.scrollable {
overflow-y: scroll;
margin-top: 20px;
height: calc(100% - 124px);
/*124px => 10px on container margin + 79px top div + 15px button + 20 px this top margin*/
}
.border {
border: 1px solid
}
<div class="container">
<div class="border" style="height: 79px;"></div>
<div class="border scrollable">
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
<div class="border" style="height: 79px;"></div>
</div>
<button style="width: 100%;">This button should stick to bottom</button>
</div>
关于javascript - 如何使溢出 y 滚动响应的 div(高度明智)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57479830/