直到窗口調整大小的活動CSS屬性？

Question

我很新，所以我很抱歉，如果它是一個明顯的。我有兩個獨立的滾動類似這樣的例子列在這裏（想象一下他們的工作時，有足夠的內容）：

這fiddle可能會使它更容易一點比低於

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

的代碼片段可視化

一旦足夠調整窗口大小，「one」和「two」將堆疊在一起。我希望將「xo-scroll-col」css激活，直到它們堆疊，然後禁用它。

基本上這裏的想法是讓他們獨立滾動，直到他們堆疊，因爲它不再需要在那一點上。如何做到這一點的想法？

Answer 1

我瘋了你fiddle。請檢查這是否是你需要的。主要有兩個變化。

1）首先，高度從單元%變爲vh
height: calc(100vh - 120px);

2）其次，加入media-query自舉md大小

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

Answer 2

您可以使用jQuery $(window).resize和它裏面聽$(window).width()然後用.addClass和.removeClass() OR 把你.xo-scroll-col類@media (max-width: $media-sm){}內。

瞭解更多有關媒體查詢在CSS： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries