Wie div expand in Bootstrap anstelle von Scrollbar zu machen?

Question

Ich benutze Bootstrap und verwende die Klasse col-md-6. In der linken Spalte habe ich ein Bild und in der rechten Spalte zwei Absätze. Wenn ich den Webbrowser verkleinern (oder mobile verwenden), möchte ich das div erweitern, anstatt eine Bildlaufleiste zu verwenden. Was jetzt passiert, ist, dass das Bild gut angezeigt wird, aber ich muss die Bildlaufleiste verwenden, um die Textabsätze zu sehen.

Entschuldigung, ich bin irgendwie neu in der Webprogrammierung und habe eine beträchtliche Zeit damit verbracht, herauszufinden, was ich falsch mache. Ich bin mir nicht sicher, ob es relevant ist, aber ich füge auch das nächste Stück Code nach dem Problem hinzu.

Ich möchte es von pg4 zu pg5 scrollen, aber ich will nicht eine zusätzliche Bildlaufleiste, um den gesamten Inhalt in pg4 sehen zu müssen.

EDIT: Fühlen Sie sich auch wie ich sollte beachten, dass ich ähnliche Fragen hier gepostet habe und viele der Antworten auf diese Probleme versucht haben und nichts hat noch funktioniert.

<div id="pg4"> 
    <div class="container"> 
    <h1 class="text-center text-uppercase">About Me</h1><hr/> 
    <div class="row"> 
     <div class="col-md-6"> 
     <img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" /> 
     </div> 
     <div class="col-md-6"> 
     <p>PARAGRAPH 1</p> 
     <p>PARAGRAPH 2</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div id="pg5"> 
</div> 

/* PG 4 */ 
#pg4 { 
    background-color: #282E34; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: block; 
    top: 250%; 
    overflow: auto; 
} 

#pg4 p { 
    color: white; 
    text-align: left; 
    font-size: 20px; 
    margin-left: 3%; 
    margin-right: 5%; 
    margin-bottom: 10%; 
    color: #6c6d6e; 
} 

#p1 { 
    margin-top: 15%; 
} 

#picture { 
    width: 45%; 
    margin-top: 15%; 
} 

/* PG 5 */ 
#pg5 { 
    background-image: url("IMAGE"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 350%; 
    overflow: auto; 
} 

Answer 1

Versuchen zusätzliche Klassen zu Ihrem divs

<div class="row"> 
    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"> 
    <img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" /> 
    </div> 
    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"> 
    <p>PARAGRAPH 1</p> 
    <p>PARAGRAPH 2</p> 
    </div> 
</div> 

So etwas hinzuzufügen.

Wenn Sie nicht col-xs-? standardmäßig Bootstrap gestapelt Ihre Divs gestapelt und es verhält sich wie col-xs-12. Gleiches gilt für große Displays. Sie müssen also eine Breite für extra kleine und große Displays

Und von diesem Teil angeben:

#picture { 
width: 45%; 
margin-top: 15%; 
} 

entfernen width: 45% Sie bereits img-responsive

Answer 2

definiert Wenn Sie height und overflow: auto für ein Element festgelegt, es bedeutet, dass dieses Element scrollbar sein soll. Wenn Sie das nicht wollen, statt height: 100% setzen Sie height: auto;