콘텐츠가 확장됨에 따라이 div를 확장 할 수 있습니까?

Question

어려운 문제는 첫 번째 페이지 작업을 수행하기 위해이 CSS 규칙 : html {height: 100%}이 필요하다는 것입니다. prototype을 참조하십시오.

이렇게하면 로그인 div은 창의 높이를 기준으로 가운데에 맞출 수 있습니다.

그러나, 두 번째 페이지는 지금이 높이에 갇혀 내가 아약스를 사용하여 콘텐츠를 채우는으로 확장하지 않습니다. 별 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>