Aktive CSS-Eigenschaft bis Fenstergröße geändert?

Question

Ich bin ziemlich neu, so tut mir leid, wenn es offensichtlich ist. Ich habe zwei unabhängig voneinander Spalten wie in diesem Beispiel Scrollen hier (man stelle sie funktionieren, wenn es genug Inhalt ist):

Dieses fiddle könnte es ein bisschen leichter machen den Code-Schnipsel zu visualisieren als unter

.xo-scroll-col { 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    overflow: auto; 
 
    height: calc(100% - 120px); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 xo-scroll-col"> 
 
      one 
 
     </div> 
 
     <div class="col-md-8 xo-scroll-col"> 
 
      two 
 
     </div> 
 
    </div> 
 
</div>

Sobald Sie die Größe des Fensters geändert haben, werden "Eins" und "Zwei" übereinander gestapelt. Ich möchte das "xo-scroll-col" css bis zum Stapeln aktiv haben und dann deaktivieren.

Im Grunde ist die Idee hier, sie unabhängig voneinander scrollen zu lassen, bis sie gestapelt sind, da sie zu diesem Zeitpunkt nicht mehr benötigt werden. Gedanken darüber, wie man das macht?

Answer 1

ich verrückt haben eine fiddle für Sie. Bitte prüfen Sie, ob Sie das brauchen. Hauptsächlich zwei Änderungen daran vorgenommen.

1) Zuerst Höheneinheit änderte sich von % zu vh
height: calc(100vh - 120px);

2) Zweitens:

@media (min-width:992px){ 
    .xo-scroll-col { 
    top: 0; 
    bottom: 0; 
    overflow: auto; 
    height: calc(100vh - 120px); 
    } 
} 

Answer 2

können Sie jQuery $(window).resize verwenden und es im Inneren des zu $(window).width() hören und verwenden Sie dann .addClass und .removeClass() OR Ihre .xo-scroll-col Klasse innerhalb eines @media (max-width: $media-sm){} setzen.

mehr über Media-Abfrage in CSS lesen: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries