<分区>
<分区>
这是我的 HTML
<div class="wrap">
<div class="container" style="padding: 5px 0px 10px 10px;">
<a href="/"><img class="pull-right img-responsive" src="logo.png"></a>
</div>
<nav id="w0" class="navbar navbar-default" role="navigation">
<div class="container">
<div id="w0-collapse" class="collapse navbar-collapse">
<ul id="w1" class="navbar-nav nav">
<li class="active"><a href="/">Home</a></li>
</ul>
</div>
</div>
</nav>
<div class="img-responsive startpage" style="background-image: background.jpg;">
<div class="container">
<div class="site-index">
<h1 class="middle"> Title vertical middle</h1>
</div>
</div>
</div>
</div>
<footer class="footer">
</footer>
.wrap 类覆盖整个屏幕。太完美了!我的问题是第三个子元素(具有 img-responsive 的 div)在屏幕尺寸的中间结束。
我怎样才能使第三个 child 至少是导航栏和页脚之间的空间。当然，如果内容更多……，它应该扩展。
这里是 css 类:
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
.startpage {
padding-top: 20px;
}
下一个问题是:如何让 h1 标签垂直居中对齐？
最佳答案
尝试这样的事情
.img-responsive{
min-height: 300px; // Adjust the height of your min height
background-image: url('background.jpg;');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
关于twitter-bootstrap - 子元素高度 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35938682/