0

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"

Shih-Min Lee
  • 9,350
  • 7
  • 37
  • 67

1 Answers1

1

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • oh I was coding in react actually. – Shih-Min Lee Nov 30 '15 at 06:07
  • Take this fiddle for example, I am hoping to get rid of the yellow area. The problem is the blue area sometimes have heights of 1000px which covers part of the red part. – Shih-Min Lee Nov 30 '15 at 06:10
  • You may need to create a duplicate "SearchArea" div with `visibility: hidden`, or use JavaScript, to push down "ThingsToAlign". I've updated my answer with various references. – Michael Benjamin Nov 30 '15 at 06:41
  • thank you. I managed to solved this with javascript using first link. But I was wondering if there are css ways to solve it? I am worried javascript will have side effects on react.js rendering components... – Shih-Min Lee Nov 30 '15 at 07:24
  • 1
    By using fixed positioning on the SearchArea div you are removing it from the normal flow of the document. This means that other elements don't even know it exists, so they won't adjust to its variable height. – Michael Benjamin Nov 30 '15 at 11:40
  • If SearchArea was a fixed height, the problem could be easily solved with CSS. But since it's a variable height, something needs to tell other elements what the height is at every instance. JS can do this. Another solution, which I mentioned before and is described in linked answers, would be an invisible duplicate div. This would be really hackey and require extra mark-up, so is not a preferred alternative. – Michael Benjamin Nov 30 '15 at 11:45
  • Let me know if anything can be changed in your mark-up, and I'll try again to provide a pure CSS solution. – Michael Benjamin Nov 30 '15 at 11:51
  • I see. ya should keep it simple and go with the straightforward option here. Thank you! – Shih-Min Lee Dec 01 '15 at 01:39