将dom元素与另一个固定顶部元素的底部对齐 [英] Align dom element to the bottom of another fixed-top element
问题描述
我有一个固定在屏幕顶部的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;
ps：我在react.js中编写代码，所以这就是为什么你看到className 而不是class
解决方案首先，您的HTML属性 className 是不正确的（在标准HTML中）。它应该是 class 。
其次，您应该尽量避免使用尖括号来环绕演示文本。浏览器会认为它是一个标签，并忽略它（即呈现时它将是不可见的）。
你的问题并不完全清楚，但是从我理解的这个演示可能会有所帮助： http://jsfiddle.net/kdbsm3hz/
否则，您可能会在其他类似问题中找到解决方案：
- 如何使用CSS定位固定变量高度标题和可滚动内容框？
- 位于固定div下，高度可变的位置DIV
- 将可滚动div放置在可变高度的固定div下方 可变高度标题下的可滚动div
- 创建可变高度固定包含可滚动内容的CSS标题
I have a div that is fixed to the top of the screen. In the div there is a search area where you make ajax calls and fetch data into the div, and that changes the div height.
Also there is another div called "ThingsToAlign". I want to align this to the bottom of the fixed-top div.
Any one knows how to do this? I tried vertical-align or float: top but none of them are working.. Thanks.
<div className="container-fluid">
<div className="navbar-fixed-top">
<SearchArea />
</div>
<div>
<ThingsToAlign/>
</div>
</div>
In bootstrap the class navbar-fixed-top has the following properties.
.navbar-fixed-top {
position: fixed;
top: 0;
}
p.s: I was coding in react.js so that's why you see "className" instead of "class"
解决方案 First, your HTML attribute className is incorrect (in standard HTML). It should be class.
Second, you should try to stay away from using angle brackets to surround demo text. The browser will consider it a tag and ignore it (i.e., it will be invisible when rendered).
Your question is not entirely clear to me, but from what I understand this demo may be helpful: http://jsfiddle.net/kdbsm3hz/
Otherwise, you may find a solution in other similar questions:
- 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
这篇关于将dom元素与另一个固定顶部元素的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
