從子div內訪問父div的寬度

Question

我的問題是這樣的。我有一個父母div這是100%。我有另外的3 divs的寬度爲20%,60%和20%，它們總共填充了父母div。現在我的問題是我想打開button點擊一個視圖。 button在寬度爲60%的中間div中實現。我想打開的視圖應該覆蓋整個頁面。但是因爲我的中間div是60%它只擴展了60％，使頁面的其他部分留空。

那麼我怎樣才能放置在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;} 

Answer 1

組件，您希望呈現在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它將覆蓋整個屏幕。

Answer 2

有限的寬度內，家長有一個全屏幕的寬度元素的最好方法是使用position: relative並設置切緣陰性：

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

希望這有助於！