[英]Jumbotron not adjusting with screen/browser size
I am working with BootStrap and facing an issue with Jumbotrons. 我正在与BootStrap合作,并且正遇到巨无霸的问题。 There are 2 divs on my page, the second one should suppose to take the remaining screen size. 我的页面上有2个div,第二个应该假定采用剩余的屏幕尺寸。 But when i am changing the browser height and width it's not adjusting accordingly as in the height of the div is not getting adjusted as it should. 但是,当我更改浏览器的高度和宽度时,它并没有进行相应的调整,因为div的高度没有得到应有的调整。
HTML : 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: CSS:
html,body
{
height: 100%;
width: 100%;
}
#jumbo1
{
height:auto;
}
#jumbo2
{
padding: 0px;
max-height: 100%;
}
#gly
{
text-align: center;
margin-top: 300px;
}
Can anyone tell what am I doing wrong here??? 有人可以告诉我我在做什么错吗???
This is because of the max-height: 100%;
这是因为max-height: 100%;
for #jubmo2
对于#jubmo2
This should do the trick 这应该可以解决问题
html, body{
height:100%;
}
#jumbo1 {
height:100%;
}
.container-fluid {
text-align:center;
}
#gly {
display:inline;
position:absolute;
bottom:20px;
}
Try it directly in your page. 直接在您的页面中尝试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.