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

【问题标题】：semantic ui make content div scrollable but not the whole page scrollable? (meteor + react)语义 ui 使内容 div 可滚动但不是整个页面可滚动？（流星+反应）
【发布时间】：2017-03-26 11:48:40
【问题描述】：

我想实现这样的目标，我之前在这里搜索过：

jsfiddle.net/psychomachine/03pfvhzs/1/

但我的应用程序得到的结果是这样的：

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

这是正在渲染的代码：

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

内容 div 中的示例代码，即“推送器”

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

菜单栏的 div 显示在：

<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

由于它的渲染方式，它不可能在 React 中做吗？

这真的让我很烦，但如果它不能完成，哦，好吧，我不得不忍受页面不一致，因为没有滚动内容的页面没有滚动条，而那些有滚动条的页面会有滚动条这会将所有内容都向左推一点

【问题讨论】：

标签： html reactjs meteor semantic-ui

【解决方案1】：

它与 Meteor 或 React 无关，你只需要将你的推送器包装在一个可推送的标签类中，就像这样。

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

【讨论】：

【解决方案2】：

您只需将其包装在可推送的类中：

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

【讨论】：