CSS: height / overflow-y:hidden 对 div 大小没有影响

Question

我有以下 div 和这两个标识符：

.locations_wrapper

和

#tenn_location_wrapper

后者的height设置为600px，前者的高度设置为500px。我已将 overflow-y:hidden 设置为每个 div 标识符，但是，当 div 在 Chrome 中呈现时，高度为 2215px。有什么方法可以防止它扩展到这个高度并遵守指定的 height 值吗？

这是一个 fiddle 与 HTML 和 CSS:

https://jsfiddle.net/ft74v68f/2/

N.B。 fiddle 并不能完全说明问题，因为大小为 2048px * 1365px 的 Bg 图像未渲染。

我的 <body> 标签在其子标签 locations_wrapper 的中间结束。然而，当我增加 body 元素的 height 使其不溢出时，其子元素的高度仍未强制执行。

Answer 1

问题出在你的

#tenn_location_wrapper {
    display:table !important
}

.locations_wrapper {
    display:table !important
}

将其替换为 display:block，您会发现它已修复。仅使用表格来使用表格数据，因为使用它们来设置页面样式会导致很多问题。

CSS: height / overflow-y:hidden 对 div 大小没有影响

CSS: height / overflow-y:hidden not having effect on div size

html

css