从子 div 内部访问父 div 的宽度答案

【问题标题】：accessing width of parent div from inside child div从子 div 内部访问父 div 的宽度
【发布时间】：2017-02-11 15:48:50
【问题描述】：

我的问题是这个。我有一个父母div，它是100%。我还有另外 3 个宽度为 20% 的 divs 、60% 和 20%，它们完全填充了父 div。现在我的问题是我想在button click 上打开一个视图。 button 是在div 的中间实现的，也就是宽度的60%。我要打开的视图应该覆盖整个页面。但是因为我的中间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

父级

.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;}

【问题讨论】：

标签： html css reactjs

【解决方案1】：

在有限宽度的父元素中拥有全屏宽度元素的最佳方法是使用position: relative 并设置负边距：

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

你想在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 时，它将覆盖整个屏幕。

【讨论】：