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）应该从该高度出现。

我的问题是：当屏幕达到该最小高度时，我在'主内部类'中设置的填充底部（或边距）消失......我该如何解决这个问题？

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

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

Answer 1

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

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

Answer 2

对于任何在未来遇到这个问题的人来说，对我有用的修复方法是删除显式的

.main-inner

的

height: 100%;

。

注意：

min-height: 100%;

似乎也会导致同样的问题。

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

---