隨着內容擴展，這個div可能會擴展嗎？

Question

困難的問題是我需要這個CSS規則：html {height: 100%}爲了使我的第一頁工作。見prototype。

這允許登錄div根據窗口的高度居中。

然而，在第二頁，現在是停留在這個高度，不會展開，因爲我填充使用AJAX的內容。請點擊星號in this link或查看下面的內容。

您可以看到虛線停止的位置是窗口原始渲染的100％。

如果我刪除100％的高度，它會展開，但SignOn頁面因爲沒有高度而被破壞。

注意：在基於應用程序狀態的JSX中，React使用一個簡單的條件來控制從頁面到另一個頁面的更改。

我應該根據應用程序狀態更改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設置爲固定元素的高度的下一個元素。
另一個問題是，如果想要將其父級與視圖端口的高度不在同一高度時居中登錄組件，則可以使用主容器的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>