Spalten behoben und scrollbar mit entweder Flex Box oder Bootstrap

Question

Ich habe ein Problem, wo ich versuche, eine responsive Seite zu erstellen. In der linken Spalte möchte ich ein Bild sein, das 66% der Seite benötigt, die fixiert werden würde, und dann Inhalt auf der rechten Seite, die die restlichen 33% benötigen würde, die ich abhängig von der Menge des Inhalts scrollen möchte. Daher habe ich mich für col-sm-8 und col-sm-4 entschieden.

Ich habe viele verschiedene Variationen versucht, um es zum Laufen zu bringen. Am weitesten entfernt bin ich, wenn der Inhalt auf der rechten Seite zu groß ist und nach unten scrollt. Hier

ist das, was ich bisher:

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

Ich möchte die Seite Flüssigkeit sein, so dass, wenn Seitengröße schrumpfen, Inhalt geht unter Foto, wenn seine auf mobilen oder ein tablet

Answer 1

Die Idee ist, alle div nehmen 100% der Seitenhöhe, und mit overflow:auto zu den Spalten Sie haben, was Sie brauchen

Siehe Code-Schnipsel:

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