Question

我的最后一个div（实际上最后我想要更多的div）正在上升页面（尝试改变高度）。我不明白为什么因为我的第二个绝对好。点击此处：https://vitas.sk/1/

HTML

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

那是因为你的第二个DIV（.indexsecond）有80％的高度，这显然会随着浏览器的寡妇的大小而改变。如果我将高度更改为px（+ overflow：hidden），则行为将消失。

此外，.indexthird的高度为％，。indexthirdbbg的填充顶部为％，这可能会在调整浏览器窗口大小时为行为添加一些内容。

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

Answer 3

由于您使用的是Bootstrap，请在最后一个

之前添加“clearfix”div

我的div正在上网

3 个答案: