CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
drai29
drai29

Reputation: 161

Columns Fixed and Scrollable with Either Flex box or Bootstrap

I have a problem where I am trying to build a responsive page. The left column I would like to be a picture that takes 66% of the page which would be fixed, and then content on right that would take the remaining 33% which I would like to be scrollable dependent on the amount of content. Therefore, I have opted to use col-sm-8 and col-sm-4.

I have been trying many different variations to get it to work. The furthest I have got to is where content on right is too large that it scrolls down and then below the image white space appears.

Here is what I have so far:

<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%;
}

I want the page to be fluid so when shrinking size of page, content goes underneath photo if its on mobile or a tablet

Upvotes: 1

Views: 38

Answers (1)

Chiller
Chiller

Reputation: 9738

The idea is to make all div take 100% of the page height, and with adding overflow:auto to the columns you will have what you need

See code snippet:

.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>

Upvotes: 1

Related Questions