Question

我需要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>

Answer 1

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

＆＃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;

Answer 2

将 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>

Answer 3

添加到上一个答案：

＆＃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;

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

父div对内部div的响应

3 个答案: