Jumbotron未调整屏幕/浏览器大小

我正在使用BootStrap并面临Jumbotrons的问题。我的页面上有2个div，第二个应该是假设剩余的屏幕尺寸。但是，当我更改浏览器的高度和宽度时，它不会相应地进行调整，因为div的高度未得到调整。Jumbotron未调整屏幕/浏览器大小

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

谁能告诉我究竟做错了什么???

来源

2015-06-05 tt tanker

你是什么意思“不调整”？ – lucgenti

2 div的内容没有得到正确的显示。如果你看看图形，它应该在距离div顶部300px的边距，当浏览器调整到最大值时工作，但是当我用浏览器切换时，它会改变并且“DOES NOT家长DIV（jumbo2）内的WRAPS“，以使其响应。 –

所以你希望你的箭头只比折叠的高度低一点？ – lucgenti

这应该做的伎俩

html, body{ 
    height:100%; 
} 

#jumbo1 { 
    height:100%; 
} 

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

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

直接在网页试试吧。

来源

2015-06-05 08:11:44 lucgenti

非常感谢，这正是我想要的，但是图形并没有进入中心？ –

已更正。现在看。 – lucgenti

宽度100％是否超出屏幕尺寸？：/ –

这是因为max-height: 100%;为#jubmo2

来源

2015-06-05 08:00:05 Vishal

第二个div应该是剩余的屏幕大小 –

尝试高度：auto代替最大高度：100％ – Vishal

Jumbotron未调整屏幕/浏览器大小

回答

相关问题