语义ui使内容div可滚动但不是整个页面可滚动？ （流星+反应）

Question

I want to achieve something like this, that I searched up here before:

jsfiddle.net/psychomachine/03pfvhzs/1/

But the result I am getting for my application is this:

http://i.imgur.com/S4wbKp9.png

This is the code that is being rendered:

//App.js
render() {
return <div className="main2">
  {/*HEADER (NAVIGATION + CONTEXT BAR)*/}
  <Navigation />
  {/*CONTENT*/}
  <div className="pusher">{ this.props.children }</div>
</div>;
},

Example code that goes in the content div, ie "pusher"

<div className="ui main text container">
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
  <h3>Page Two</h3>
..... // This goes on for another 20 times, just to get scrolling to show
</div>

And the div for the menu bar, that is rendered at :

<div className="ui top attached demo inverted menu">
Rest of the code is at: http://semantic-ui.com/examples/fixed.html
If you view the page source, since it will be too cluttered to put in here

Is it not possible to do in React, due to how it renders things?

This is really bugging me, but if it can't be done, oh well, ill have to live with page inconsistencies because pages without scrolling content won't have a bar, and those that do, will have a scroll bar that will push everything to the left a little

Answer 1

It has nothing to do with Meteor or React, you just need to wrap your pusher in a pushable tag class, like so.

<div class="ui bottom attached segment pushable">
  <div class="pusher">
    <div class="ui main text container">
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
    </div>
  </div>
 </div>

Answer 2

You only have to wrap it in a pushable class:

 <div class="ui top attached demo inverted menu">
  <div class="pusher">
    <div class="ui main text container">
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>....</h3>
    </div>
  </div>
 </div>