我有一个如下所示的 Bootstrap 页面:
<nav> ... </nav> <!-- height not fixed -->
<div class="container-fluid eye-catcher">
<div class="row">
<div class="col-sm-8"> ... </div>
<div class="col-sm-4 image"> ... </div>
</div>
</div>
我的图像代码是这样的,效果很好...
.image {
background-image: url("image.png");
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
height: 100%;
}
...但是我怎样才能让行填满(仅)剩余空间(那么滚动条应该不可见)
最佳答案
您可以使用媒体查询
添加一些Flexbox
。完整代码 HERE
.content {
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
padding: 10px;
border: 1px solid black;
}
.image {
background: lightblue;
}
.left {
background: lightgreen;
}
@media(min-width: 768px) {
.eye-catcher {
flex: 1;
border: 1px solid black;
display: flex;
width: 100%;
}
.flex-row {
display: flex;
flex: 1;
}
}
关于html - 将带有背景图像的 div 缩放到剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37615849/