Question

我在尝试构建响应式页面时遇到问题。左栏我想成为一张需要修复的页面的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%;
}

我希望页面流畅，所以当缩小页面大小时，如果在移动设备或平板电脑上，内容会在照片下方显示

Answer 1

我们的想法是让所有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>

使用Flex框或Bootstrap固定和滚动的列

1 个答案: