Jumbotron無法根據屏幕/瀏覽器大小進行調整

Question

我正在與BootStrap合作，並且正遇到巨無霸的問題。 我的頁面上有2個div，第二個應該假定采用剩余的屏幕尺寸。 但是，當我更改瀏覽器的高度和寬度時，它並沒有進行相應的調整，因為div的高度沒有得到應有的調整。

HTML：

    <div class="jumbotron" id="jumbo1">
    <div class="container">
    <h1>Some Txt.</h1>
    </div>        
    </div>

    <div class="jumbotron" id="jumbo2">

    <p>

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuri.
        </p>
    <div class="container-fluid">

    <section id="gly">  <span class="glyphicon glyphicon-arrow-down" aria-hidden="true" id="dwnarrow"></span>
        </section>  

        </div>
    </div>

CSS：

     html,body
    {
        height: 100%;
        width: 100%;
    }


    #jumbo1
    {
        height:auto;
    }

    #jumbo2
    {

        padding: 0px;
        max-height: 100%;
    }

    #gly
    {
        text-align: center;

        margin-top: 300px;
    }

有人可以告訴我我在做什么錯嗎？？？

Answer 1

這是因為max-height: 100%; 對於#jubmo2

Answer 2

這應該可以解決問題

html, body{
  height:100%;
}

#jumbo1 {
  height:100%;
}

.container-fluid {
  text-align:center;
}

#gly {
  display:inline;
  position:absolute;
  bottom:20px;
}

直接在您的頁面中嘗試。