Div 滚动使 padding-bottom 消失

Question

我有一个结构如下的网站：

    <div class="main-outer">
     <div class="main-inner">
      <div class="test"> 
        components
      </div>
     </div>
    </div>

div 'test' 调用不同组件的地方。

我正在尝试使其高度响应，因此如果组件具有“高度：100%”，它应该随着屏幕的增长而增长。 但是，如果我在组件中设置了最小高度，则滚动（来自 main-outer div）应该从该高度出现。

我的问题是：当屏幕达到最小高度时，我在 'main-inner class' 中设置的 padding-bottom（或边距）消失了... 我该如何解决这个问题？

我这里有一个例子： https://jsfiddle.net/4o1j2zmn/1/

编辑：我需要比“测试”更高的 div 中的边距，因为当我调用许多组件时，我想让边距成为全局的

Answer 1

我检查了您的代码，我认为“.main-outer”填充工作正常。这是“.test”类的“.main-inner”边距和固定高度的问题。我已将您的边距属性从“.main-inner”转移到“.test”类，并将“.test”高度设为自动，以便它会根据内容进行调整，并显示父容器外边缘的边距。请检查并尝试以下 sn-p ：

.main-outer {
  padding: 0 50px;
  height:100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: blue;
}

.main-inner {
  height: 100%;
  box-sizing: border-box;
}

.test{
      display: block;
    content: '';
    height: auto;
    background-color: red;
    margin: 50px 0 50px 0;
}

    <div class="main-outer">
      <div class="main-inner">
        <div class="test">
          http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ 
        </div>
      </div>
    </div>