父div对内部div的响应

时间:2018-03-16 10:04:30

标签: html css

我需要div边界响应。但是,您可以看到.buttonsDiv需要位于底部,并且需要在.buttonsDiv下方展开包装边框。但是,当我使用此代码时,按钮位于底部,但边框保持在顶部。我不能使用margin,因为content div包含显示/隐藏的元素,并且需要修复页面aka禁用滚动。

HTML

.wrapper { 
   border: 1px solid black; 
}

.buttonsDiv {
   position: fixed;
   bottom: 10px;
}
 <div class="wrapper">
   <div class="borderedDiv">Content</div>
   <div class="buttonsDiv">Butons</div>
 </div>



     

3 个答案:

答案 0 :(得分:4)

很难理解你的目标。你的意思是这样的吗?

&#13;
&#13;
 html, body{
   margin: 0;
   padding: 0;
 }
 
 .wrapper{ 
   height: 100vh;
   width: 100vw;
   padding: 10px;
   box-sizing: border-box;
 }
 
 .inner_wrap{
   position:relative;
   width: 100%;
   height: 100%;
   border: 1px solid black;
   box-sizing: border-box;
 }
 
 .buttonsDiv{
   position: absolute;
   bottom: 10px;
 }
&#13;
<div class="wrapper">
  <div class="inner_wrap">
    <div class="borderedDiv">Content</div>
    <div class="buttonsDiv">Butons</div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:4)

position:absolute; 放入父级,并将top,bottom,left,right定义为0;

PS:如果你把高度100vh

.wrapper { 
   border: 1px solid black; 
   position: absolute;
   bottom: 0;
   top: 0;
   right: 0;
   left: 0
}

.buttonsDiv {
   position: fixed;
   bottom: 10px;
}
<div class="wrapper">
   <div class="borderedDiv">Content</div>
   <div class="buttonsDiv">Butons</div>
 </div>

答案 2 :(得分:2)

添加到上一个答案:

&#13;
&#13;
    .wrapper { 
       border: 1px solid black; 
       height: 100vh;
    }
    
    .buttonsDiv {
       position: absolute;
       bottom: 1px;
    }
&#13;
 <div class="wrapper">
   <div class="borderedDiv">Content</div>
   <div class="buttonsDiv">Butons</div>
 </div>
&#13;
&#13;
&#13;

包装器不需要位置:相对,静态位置会很好。 使用按钮div的绝对位置,可以将元素相对于父元素放置。因此,如果我们将.buttonsDiv放到底部:1px它会粘在元素的底部。