我在尝试构建响应页面时遇到问题。我想让左列成为一张图片,占固定页面的66%,然后是右边的内容,占剩余的33%,根据内容的数量,我希望它可以滚动。因此,我选择使用col-sm-8和col-sm-4。
我一直在尝试许多不同的变体来使其工作。我要去的最远的地方是右边的内容太大,以至于它会向下滚动,然后在图像下方显示空白。
这是我到目前为止的内容:
<div class="container-fluid" style="padding: 0; margin-right: auto; margin-left: 0px;">
<div class="row" style="margin-bottom: 20px; margin-left: 0px; margin-right: auto;">
<div class="col-lg-8">
<div class="img-holder">
<div class="box-wrapper"></div>
</div>
</div>
<div class="col-lg-4">
<h1>Some Content</h1>
</div>
</div>
</div>
CSS:
.img-holder {
padding: 0;
border: none;
border-radius: 0;
width: 100%;
height: 100%;
z-index:-1;
}
.box-wrapper{
background-image: url(~/img/example.jpg);
background-size: cover;
background-position: 47.5% 42.675%;
background-repeat: no-repeat;
padding-bottom: 100%;
}
我希望页面流畅,因此当缩小页面大小时,如果内容在移动设备或平板电脑上,则内容会位于照片下方
最佳答案
这个想法是让所有div都采用页面高度的100%
,并在列中添加overflow:auto
,您将拥有所需的内容
查看代码段:
.img-holder {
padding: 0;
border: none;
border-radius: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.box-wrapper {
background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
background-size: cover;
background-position: 47.5% 42.675%;
background-repeat: no-repeat;
}
.wrapper {
height: 100vh;
margin: 0;
}
.wrapper div {
height: 100%;
margin: 0;
max-height: 100%;
overflow:auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid wrapper" style="padding: 0; margin-right: auto; margin-left: 0px;">
<div class="row">
<div class="col-lg-8">
<div class="img-holder">
<div class="box-wrapper"></div>
</div>
</div>
<div class="col-lg-4">
<h1>Some Content</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Iste, ullam beatae vero neque quae deserunt voluptate asperiores quod saepe fuga optio inventore quos quas dolorum obcaecati temporibus blanditiis, vitae quam.</p>
</div>
</div>
</div>