2列響應獨立佈局1溢出

使用角度材料，您可以輕鬆地創建響應式佈局。現在我使用2列，但他們應該是獨立的2溢出像我在這個例子中：http://jsfiddle.net/2f6qscrp/227/ 問題是響應;列移動到下面的移動設備上，正確/左側放在較大的設備上，但它們仍然保持每列2溢出，而不是創建一個包含兩列的主溢出。有什麼方法可以解決它嗎？2列響應獨立佈局1溢出

<div ng-app="home" ng-controller="MainCtrl" class="scroll"> 
    <div layout="column" layout-gt-sm="row" class="scroll"> 
    <div flex class="blue"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit venenatis neque ut lacinia. Sed quis tortor vitae massa ornare aliquam. Cras vel aliquam tellus. Maecenas eleifend arcu eros, a cursus dui tempor sed. Aenean dignissim consectetur turpis ut scelerisque. Nullam ullamcorper ut sapien at convallis. Maecenas justo enim, lobortis ac leo at, venenatis dapibus sapien. Maecenas elementum urna a est eleifend mollis. Mauris vel ex blandit, aliquam urna eu, eleifend libero. Vestibulum commodo porta auctor. Fusce quis vulputate metus. Vestibulum commodo rutrum orci at efficitur. Sed luctus elit ut viverra porttitor. Donec cursus luctus purus ac vehicula. Cras ac ornare nibh, eget tempor nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Ut bibendum, nibh at ultrices convallis, eros nisl congue lacus, at sodales mauris nunc in velit. Vivamus molestie magna aliquet, varius velit in, posuere nunc. Sed a feugiat odio. Duis eu nisl quis diam aliquam interdum at quis turpis. In mollis lobortis erat in congue. Nulla et scelerisque ipsum. Phasellus imperdiet eu lacus eu lacinia. Cras vitae tempor magna. 

Aenean venenatis mauris nibh, sit amet varius diam condimentum eu. Curabitur efficitur massa magna. Duis pretium sem ac consequat egestas. Proin lobortis mauris vitae urna pulvinar, a tincidunt orci facilisis. In porta eleifend fermentum. Vestibulum accumsan, metus a condimentum tristique, augue nisl placerat eros, id posuere nunc orci vel metus. Integer at massa efficitur, auctor neque nec, placerat nisl. Cras fringilla, nisi ut accumsan facilisis, dolor enim placerat elit, non venenatis turpis dui in tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sollicitudin odio ac nisi fermentum dapibus. Cras euismod tortor quis consequat porta. Suspendisse semper vehicula ultricies. Quisque maximus sollicitudin justo at rhoncus. Donec eu vestibulum mauris, at consequat tortor. 

Fusce sollicitudin a justo vitae convallis. Pellentesque interdum, purus at mollis molestie, metus tortor sagittis eros, vitae mattis lorem leo in sapien. Vivamus porttitor diam eu quam lacinia, vel commodo dolor venenatis. Mauris magna est, ele 
    </div> 
    <div flex class="red"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit venenatis neque ut lacinia. Sed quis tortor vitae massa ornare aliquam. Cras vel aliquam tellus. Maecenas eleifend arcu eros, a cursus dui tempor sed. Aenean dignissim consectetur turpis ut scelerisque. Nullam ullamcorper ut sapien at convallis. Maecenas justo enim, lobortis ac leo at, venenatis dapibus sapien. Maecenas elementum urna a est eleifend mollis. Mauris vel ex blandit, aliquam urna eu, eleifend libero. Vestibulum commodo porta auctor. Fusce quis vulputate metus. Vestibulum commodo rutrum orci at efficitur. Sed luctus elit ut viverra porttitor. Donec cursus luctus purus ac vehicula. Cras ac ornare nibh, eget tempor nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Ut bibendum, nibh at ultrices convallis, eros nisl congue lacus, at sodales mauris nunc in velit. Vivamus molestie magna aliquet, varius velit in, posuere nunc. Sed a feugiat odio. Duis eu nisl quis diam aliquam interdum at quis turpis. In mollis lobortis erat in congue. Nulla et scelerisque ipsum. Phasellus imperdiet eu lacus eu lacinia. Cras vitae tempor magna. 

Aenean venenatis mauris nibh, sit amet varius diam condimentum eu. Curabitur efficitur massa magna. Duis pretium sem ac consequat egestas. Proin lobortis mauris vitae urna pulvinar, a tincidunt orci facilisis. In porta eleifend fermentum. Vestibulum accumsan, metus a condimentum tristique, augue nisl placerat eros, id posuere nunc orci vel metus. Integer at massa efficitur, auctor neque nec, placerat nisl. Cras fringilla, nisi ut accumsan facilisis, dolor enim placerat elit, non venenatis turpis dui in tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sollicitudin odio ac nisi fermentum dapibus. Cras euismod tortor quis consequat porta. Suspendisse semper vehicula ultricies. Quisque maximus sollicitudin justo at rhoncus. Donec eu vestibulum mauris, at consequat tortor. 

Fusce sollicitudin a justo vitae convallis. Pellentesque interdum, purus at mollis molestie, metus tortor sagittis eros, vitae mattis lorem leo in sapien. Vivamus porttitor diam eu quam lacinia, vel commodo dolor venenatis. Mauris magna est, elementum nec erat id, tristique lacinia tellus. Integer varius id nisl vitae aliquam. Nullam commodo neque et sapien laoreet gravida. Morbi finibus dapibus ipsum, ac maximus lacus condimentum ut. 

Mauris accumsan, felis ac vestibulum faucibus, ligula tellus pretium leo, quis feugiat ligula turpis a velit. In sit amet velit dui. Nunc ultricies sem gravida erat posuere, tempus molestie orci tempor. Sed maximus bibendum laoreet. Vestibulum ac placerat felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod eget leo a imperdiet. Maecenas eu pretium purus, ut volutpat eros. 
    </div> 
    </div> 
</div>

CSS：

.scroll { 
    min-height: 100%; 
    height:100%; 
} 

.blue { 
    background-color: #0D47A1; 
    color: #fff; 
    min-height: 100%; 
    overflow-y: scroll; 
    height:100%; 
} 

.red { 
    background-color: #B71C1C; 
    color: #fff; 
    min-height: 100%; 
    overflow-y: scroll; 
    height:100%; 
}

感謝

來源

2017-01-30 End.Game

試試這個

.scroll { 
    min-height: 100%; 
    height:100%; 
} 

.blue { 
    background-color: #0D47A1; 
    color: #fff; 
    min-height: 100%; 
    overflow-y: scroll; 
    height:100%; 
} 

.red { 
    background-color: #B71C1C; 
    color: #fff; 
    min-height: 100%; 
    overflow-y: scroll; 
    height:100%; 
} 

@media (max-width:1600px) { 
    .blue, .red, .scroll { 
    height: auto; 
    min-height: auto; 
    } 
}

演示 - http://jsfiddle.net/2f6qscrp/228/

來源

2017-01-30 10:35:14 grinmax

這樣，2列大型設備不是獨立的。它仍然是1溢出 –

現在看http://jsfiddle.net/2f6qscrp/229/ – grinmax

謝謝！它工作正常 –

如果我理解正確：

你想大屏幕顯示兩列（紅色和藍色您的樣機），它們中的每一個都可以垂直滾動，因爲內容是l足以溢出。
在較小的屏幕上（移動），您希望這兩列成爲一個可滾動的長列。

您可以使用媒體查詢來實現此目的。例如：

@media (max-width:600px) { 
    .red, 
    .blue { width: 100%; } 
}

並稱，您JSFilddle的CSS將創造我認爲你是後的效果。您可以擴大和縮小瀏覽器窗口，以查看其影響。

（快速更新：我選擇的600px的最大寬度爲任意的移動樣的措施，您可以根據需要，理想的基於內容和佈局在原地工作的方式更新此）

來源

2017-01-30 10:27:34

2列響應獨立佈局1溢出

回答

相關問題