我的 div 正在与网站一起上升

Question

我的最后一个div(实际上是最后一个我想有更多的div(正在与页面一起上升(尝试更改高度(。我不知道为什么，因为我的第二个绝对是好的。链接在这里： https://vitas.sk/1/

.HTML

   .indexthird  {
            width: 100%;
            height: 40%;
            background-image: url("http://vitas.sk/1/images/indexthird.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            min-height: 300px;
            
        }
        .indexthirdbbg{
         background-color: rgba(0,0,0,0.7);
            width: 100%;
            height: 100%;
            text-align: center;
            padding-top: 7%;
        }
        
        .itquotes{
            
            font-size: 1.5vw;
        }
        .itautor {
            font-size: 1vw;
            margin-top: 1%;
            text-align: center
        }

 <div class="indexthird"><div class="indexthirdbbg">
        <i class="itquotes">"„Kým budu ľudia masakrovať zvieratá, budú zabíjať aj jeden druhého.<br> Ten kto seje vraždu a bolesť, nemôže vypestovať radosť a lásku.“"</i>
      <p class="itautor">Pythagoras</p>
    </div>
    </div>
   
  

Answer 1

试试这个

   .indexthird  {
            width: 100%;
            
            background-image: url("http://vitas.sk/1/images/indexthird.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            
        }
        .indexthirdbbg{
         background-color: rgba(0,0,0,0.7);
            width: 100%;
            height: 40%;
            min-height: 300px;
            text-align: center;
            padding-top: 7%;
        }
        
        .itquotes{
            
            font-size: 1.5vw;
        }
        .itautor {
            font-size: 1vw;
            margin-top: 1%;
            text-align: center
        }

 <div class="indexthird"><div class="indexthirdbbg">
        <i class="itquotes">"„Kým budu ľudia masakrovať zvieratá, budú zabíjať aj jeden druhého.<br> Ten kto seje vraždu a bolesť, nemôže vypestovať radosť a lásku.“"</i>
      <p class="itautor">Pythagoras</p>
    </div>
    </div>
   
  

Answer 2

这是因为您的第二个 DIV (.indexsecond( 具有 80% 的高度，该高度(显然(随着浏览器寡妇大小的调整而变化。如果我将高度更改为 px(+ 溢出：隐藏(，则行为会消失。

此外，.indexThird 的高度以 % 为单位，.indexthirdbbg 的高度以 % 为单位，这可能会在调整浏览器窗口大小时为行为添加一些内容。

您可以使用某种内部逻辑以编程方式定义 window.onresize 事件并调整div。

Answer 3

由于您使用的是 Bootstrap，请在最后一个之前添加一个 "clearfix"div