css - 任何人都可以解决这个 CSS 高度怪癖

标签 css tabs height flexbox

好吧,这让我完全难住了,已经尝试修复好几天了,但无济于事。

我已经使用 cbpFWTabs.js 来拆分我的内容。

然而,它似乎表现得很奇怪,因为它忽略了我的高度参数并将 div 设置为内容大小。

阻止这种情况的唯一方法是设置固定高度,但我希望 div 动态调整大小以填充屏幕的其余部分,并在它超过 content-wrap div(保持菜单栏固定)时显示滚动条。

我已经检查了所有的 parent ,它似乎对我尝试的任何事情都没有反应:(

这里的例子: http://numerco.com/wp-content/uploads/NUA/scratch.html

我确定它是我错过的一些微不足道的东西,但它让我发疯。

谢谢!

最佳答案

只要你在一个元素上设置了height: 100%,就意味着它会继承其父元素的高度。

因此,您需要做的第一件事是在 .container 上设置 height: 100%,使其高度占据 的整个高度正文

然后,在.container>部分设置height: 100%。然后, children 知道拉伸(stretch)到正确的高度(已从 body 向下传播)。

这应该可以解决您 OP 中的问题。但是,您的高度似乎仍有问题。如果需要,请随时提出另一个问题。

关于css - 任何人都可以解决这个 CSS 高度怪癖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39780043/

相关文章:

html - 如何在没有 Javascript 的情况下制作带有下拉菜单的 CSS 选项卡?

tabs - 如何在gnome终端中将选项卡显示为4个空格

css - 水平居中 Iframe 而不指定宽度/高度 CSS

html - 带内容的 Bootstrap 4 模态量表

html - 在不指定宽度的情况下 float div

html - 如何使用 CSS Flexbox 将流体图像和标题居中?

javascript - 一个内容 div 和几个选项卡

html - 使用CSS删除高度自动

android - 垂直布局,2 个元素,让顶部的元素填充剩余空间(底部的元素有 wrap_content)

jquery - 使用jquery在多个页面中的下拉菜单