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

Question

困难的问题是我需要这条 CSS 规则：html {height: 100%} 才能使我的第一页正常工作。见prototype。

这允许登录 div 基于窗口的高度居中。

但是，第二页现在停留在这个高度，并且在我使用 ajax 填充内容时不会扩展。点击星号in this link 或见下文。

您可以看到虚线停止的位置是窗口在 100% 时的原始渲染。

如果我删除 100% 的高度，它会扩展，但登录页面会因为没有高度而损坏。

注意：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>