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'中设置的填充底部（或边距）消失了...我该如何解决这个问题？

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

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

Answer 1

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

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

Div滚动使底部填充消失

1 个答案: