阵营DIV志愿服务岗位

Question

我的HTML看起来像以下：

return (
<div> 
    <If condition={this.state.showFullSizedImage}> 

     {/* Main div with full sized background image */} 
     <div className="div-one"> 
     </div> 

     {/* Product details div */} 
     <If condition={!this.state.showRegistration && !this.state.showLogin}> 
     <div className="div-five"> 

      </div> 
     </If> 

     {/* Show half page registration */} 
      <If condition={this.state.showRegistration}> 
       <div className="div-two"> 

       </div> 
      </If> 

      {/* Show half page login */} 
      <If condition={this.state.showLogin}> 
       <div className="div-three"> 

       </div> 
      </If> 

      {/* Show half page Password forget */} 
      <If condition={this.state.showPwdForgot}> 
       <div className="div-four"> 

       </div> 
      </If> 
     </If> 
     </div> 
    ); 

SCSS：

.div-one { 
    background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    position: fixed; 
    width: 100%; 
    min-height: 500px; 
    min-height: 100vh; 
    display: block; 
} 
.div-two { 
    position: fixed; 
    width: 50%; 
    height: 100vh; 
    background-color: #EEEEEE; 
    -webkit-animation: left-to-right-div2 0.2s forwards; 
    animation: left-to-right-div2 0.2s forwards; 
} 
.div-three { 
    position: fixed; 
    width: 50%; 
    height: 100vh; 
    background-color: #EEEEEE; 
    -webkit-animation: left-to-right-div3 0.2s forwards; 
    animation: left-to-right-div3 0.2s forwards; 
} 
.div-four { 
    position: fixed; 
    width: 50%; 
    height: 100%; 
    background-color: #EEEEEE; 
    -webkit-animation: left-to-right-div3 0.2s forwards; 
    animation: left-to-right-div3 0.2s forwards; 
} 

.div-five{ 
    position: absolute; 
    min-height: 250px; 
    min-height: 50vh; 
    background-color: brown; 
    display: block; 

} 

我想实现的是：

我的DIV一应具全屏幕DIV下面我应该看到div-five。有一个在DIV-一个按钮，clicked- DIV-两个或DIV-三格四应与DIV-一个沿开到50％的宽度像以下时：

眼下div-一，二，三和四正确渲染。但是div-five不能因为它和其他div的位置不匹配。

我该怎么办？

Answer 1

不知道这是否会产生任何影响，但是您没有为.div-five设置任何宽度（您为高度设置了两个值）。由于你的div是emtpy（在你的示例代码中）并且没有宽度，我认为它被渲染，但是没有任何宽度。

但是，你应该能够看到这个在控制台..