Question

我的问题是这个。我的父div为100%。我有另外3 divs个宽度为20%，60%和20%，它们完全填充了父div。现在我的问题是我想在button点击打开一个视图。 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

父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

要在l1点击时呈现的组件，将其放在主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>时，它将覆盖整个屏幕。

Answer 2

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

position: relative

希望这有帮助！

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

2 个答案: