html - 将 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>

在 Bootstrap 中，类 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