从子div内访问父div的宽度

我的问题是这样的。我有一个父母div这是100%。我有另外的3 divs的宽度为20%,60%和20%，它们总共填充了父母div。现在我的问题是我想打开button点击一个视图。 button在宽度为60%的中间div中实现。我想打开的视图应该覆盖整个页面。但是因为我的中间div是60%它只扩展了60％，使页面的其他部分留空。从子div内访问父div的宽度

那么我怎样才能放置在100%宽度停留在儿童div这是60％的看法。

我这是怎么显示在click的观点：

return (
     <div className="middle_div"> 
      <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={this.popup_ques}/> 
      {this.state.showComponent ? <QuestionOverlay/> : null} 
     </div> 
);

即时显示按钮的视图中单击

render() {  
    return (
     <div id="overlay">   
     </div>  
    ) 
} 

export default QuestionOverlay;

CSS

父DIV

.body_clr{ 

    background-color: #eceff1; 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 

}

孩子的div

.middle_div{ 

    width: 60%; 
    height: 100%; 
    margin-top:20%; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
    position: relative; 

}

新观点

#overlay{ 
    background:rgba(0,0,0,.75); 
    position: relative; 
    width: 100%; 
    height: 100%; 
    opacity:1; 
    -webkit-transition: opacity .25s ease;}

来源

2017-02-11 CraZyDroiD

组件，您希望呈现在Button点击，把在主div这样的：

return 
    <div> 
     {this.state.showComponent ? <QuestionOverlay/> : null} 
     <div className="first_div"/>  
     <div className="middle_div"> 
      <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" 
        onClick={this.popup_ques}/> 
     </div> 
     <div className="last_div"/> 
    </div>

当你点击button它将覆盖整个屏幕。

来源

2017-02-11 07:38:41

它工作吗？ –

有限的宽度内，家长有一个全屏幕的宽度元素的最好方法是使用position: relative并设置切缘阴性：

#overlay { 
    width: 100vw; 
    position: relative; 
    left: 50%; 
    right: 50%; 
    margin-left: -50vw; 
    margin-right: -50vw; 
}

希望这有助于！

来源

2017-02-11 07:38:42

从子div内访问父div的宽度

回答

相关问题