是否可以随着内容的扩展而扩展这个div？

Question

难题是我需要这个CSS规则：html {height: 100%}才能使我的第一页工作。请参阅prototype。

这允许登录div根据窗口的高度居中。

但是，第二页现在停留在此高度，并且在我使用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分别设置为固定元素高度的下一个元素。
另一个问题是，当您的父组件的父级与视图端口不在同一高度时，您希望将登录组件居中，这可以通过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>