コンテンツの展開に合わせてこのdivを展開することはできますか？

Question

難しい問題は、私の最初のページを作るために、このCSS規則：html {height: 100%}が必要なことです。 prototypeを参照してください。

これにより、ログインdivは、ウィンドウの高さに基づいて中央に置くことができます。

しかし、2ページ目は、今、この高さでスタックしていると私はAJAXを使用してコンテンツを取り込むよう展開されません。星in this linkをクリックするか、下記をご覧ください。

点線がどこで停止しているかは、元の100％のレンダリングで確認できます。

高さを100％削除すると拡大されますが、SignOnページは高さがないので壊れます。

注：Reactは、アプリケーション状態に基づいてJSXの単純な条件を使用して、ページからページへの変更を制御します。

アプリケーションの状態に基づいてHTMLのCSSの高さを変更する必要がありますか、これを行うにはより良い方法がありますか？

divのコンテンツが変更された後、これを反映するようにdivを拡張しないでください。

関連するCSS

html{ 
    width: 100%; 
    height: 100%; 
} 
body{ 
    background-image: url('_images/bg_paper.jpg'); 
    height: 100%; 
    width: 100%; 
} 
#app{ 
    width: 100%; 
    height: 100%; 
} 
#contents{ 
    width: 100%; 
    height: 100%; 
} 
#top-1{ 
    position: fixed; 
    width: 100%; 
    height: 40px; 
    background: rgba(255, 255, 255, 0.8); 
    border-top: 3px solid #000000; 
    border-bottom: 1px solid #bbbbbb; 
    z-index: 1000; 
} 
#top-2{ 
    position: relative; 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
    border-left: 1px dotted #888888; 
    border-right: 1px dotted #888888; 
} 
#container-1{ 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    top: 44px; 
} 
#container-2{ 
    position: relative; 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
    border-left: 1px dotted #888888; 
    border-right: 1px dotted #888888; 
} 
.body{ 
    display: none; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

Answer 1

私はflexを使用すると、状況のこの種に対処する方がはるかに簡単だと思います。
メインコンテナをflexと設定し、justifyとalignのプロパティを使用して再生すると、要素を中央に配置できます。
ここで問題となるのは、固定された配置された要素がフローの外に出るツールバーとして取得されたため、margin-topを固定要素の高さにそれぞれ次の要素に設定します。
もう1つの問題は、親がビューポートと同じ高さにないときにログインコンポーネントを集中させたいということです。これはメインコンテナにmin-height:100vhで処理できます。

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     login: true, 
 
     items: [ 
 
     'item 1', 
 
     'item 2', 
 
     'item 3', 
 
     'item 4', 
 
     ] 
 
    }; 
 
    } 
 

 
    addITem = e => { 
 
    const { items } = this.state; 
 
    const nextItem = `item ${items.length + 2}`; 
 
    this.setState({ items: [...items, nextItem] }); 
 
    } 
 

 
    loginView = e => { 
 
    this.setState({ login: true }); 
 
    } 
 

 
    login = e => { 
 
    this.setState({ login: false }); 
 
    } 
 

 
    render() { 
 
    const { items, login } = this.state; 
 
    return (
 
     <div className="container"> 
 
     <div className="toolbar"> 
 
      <div className="title">This is a fixed toolbar, click to add items</div> 
 
      <button className="btn" onClick={this.addITem}>+</button> 
 
      <button className="btn" onClick={this.loginView}>Login</button> 
 
     </div> 
 
     {login ? 
 
      <div className="login-wrapper"> 
 
      <div className="login"> 
 
       <label>Login</label> 
 
       <input placeHolder="user name" /> 
 
       <input type="password" placeHolder="password" /> 
 
       <button className="btn" onClick={this.login}>Go</button> 
 
      </div> 
 
      </div> 
 
      : 
 
      <div className="items"> 
 
      {items.map(item => <div className="item">{item}</div>)} 
 
      </div> 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    min-height: 100vh; 
 
} 
 

 
.toolbar { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid #ccc; 
 
    padding: 10px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: 999; 
 
    background-color: #333; 
 
    color: #fff; 
 
} 
 

 
.title { 
 
    padding: 10px; 
 
} 
 

 
.btn { 
 
    padding: 5px; 
 
    width: 100px; 
 
    margin: 0 15px; 
 
} 
 

 
.items { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    margin-top: 65px; 
 
    align-content: baseline; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 50px; 
 
    width: 250px; 
 
    box-shadow: 0 0 3px 1px #333; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 

 
.login-wrapper{ 
 
    display: inline-block; 
 
    margin: auto; 
 
} 
 

 
.login { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>