javascript - 根据具有更多内容的 div 动态更改多个 div 的高度

标签 javascript jquery html css

<分区>

我有一个部分,分为两个部分。这些小节中的任何一个都可以确定另一个小节的大小。

Drawing for context

我在这里草拟了一个快速代码笔:http://codepen.io/anon/pen/QyZbev

.outersection {
  width: 100%;
  overflow: scroll;
  height: 100vh;
}

.group-section {
  display: block;
  border: blue 1px solid;
  padding: 5px 0;
  height: 100%;
}

.code, .documentation {
  width: 50%;
  display: inline-block;
  border: 1px solid green;
  height: 100%;
  overflow: auto;
}

我只用 JQuery 和 CSS 尝试过,但是会有超过 2 个这样的部分,每个部分都需要不同的高度。这两种尝试都没有奏效,而且我不相信 JQuery 方式对于所有部分都足够动态。

问题是双方最终高度不匹配,然后双方似乎到处都是漂浮的。它们没有填充外壳部分,而且 div 似乎切换了它们漂浮在其上的一侧。

提前致谢!

最佳答案

使用 flex 盒子。

如果您在 .group-section 中更改为 display: flex;,它们将填充它们的空间。 由于默认值,元素将默认拉伸(stretch)然后拉伸(stretch)。 您还需要删除代码和文档中的 100% 高度,因为这既是必要的,又会迫使小元素保持较小。

您可能应该重写 css 以适应更灵活的“某种方式”。通过正确使用 flexbox,您不必知道有多少部分到达。

如果你对flexbox不熟悉,可以阅读this .

关于javascript - 根据具有更多内容的 div 动态更改多个 div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35225927/

相关文章:

jquery - 具有垂直约束的 float 滚动 Div

javascript - jQuery OOP 元素参数

javascript - Firebase 3 - ref.getAuth() 等效

javascript - Jquery 工具提示不适用于新的 ajax 追加元素

jquery - 检查元素时仅在 bx slider 中加载图像,在 Bootstrap 模式中添加 bx slider ,这是 css 问题吗?

html - 响应式表格行,带内联 block 的跨浏览器支持

javascript - 为什么过滤器隐藏所有元素?

jquery - 使用 jQuery 拖动 div 会导致页面突出显示

html - 使用分贝的 Web Audio Api

html - 灵活的 Flexbox 网格