将 dom 元素与另一个固定顶部元素的底部对齐

Question

我有一个固定在屏幕顶部的 div。在 div 中有一个搜索区域，您可以在其中进行 ajax 调用并将数据提取到 div 中，这会改变 div 的高度。

还有另一个名为“ThingsToAlign”的 div。我想将它与固定顶部 div 的底部对齐。

有人知道怎么做吗？我试过vertical-align 或float: top 但它们都没有工作.. 谢谢。

<div className="container-fluid">
    <div className="navbar-fixed-top">
      <SearchArea />
    </div>
    <div>
      <ThingsToAlign/>
    </div>
</div>

在引导程序中，类 navbar-fixed-top 具有以下属性。

.navbar-fixed-top {
    position: fixed;
    top: 0;
}

p.s：我在 react.js 中编码，所以你看到的是“className”而不是“class”

Answer 1

首先，您的 HTML 属性 className 不正确（在标准 HTML 中）。应该是class。

其次，您应该尽量避免使用尖括号来包围演示文本。浏览器会认为它是一个标签并忽略它（即在渲染时它是不可见的）。

您的问题对我来说并不完全清楚，但据我了解，此演示可能会有所帮助：http://jsfiddle.net/kdbsm3hz/

否则，您可能会在其他类似问题中找到解决方案：

• How do I use CSS to position a fixed variable height header and a scrollable content box?
• Position DIV below fixed div with variable height
• Placing a scrollable div below a fixed div of variable height
• Scrollable div beneath a variable height header
• Creating a variable height "fixed" header in CSS with scrollable content