2 Spalten ansprechendes unabhängiges Layout 1 Überlauf

Question

Mit eckigem Material können Sie auf einfache Weise ein ansprechendes Layout erstellen. Im Moment verwende ich 2 Spalten, aber sie sollten unabhängig mit 2 Überlauf wie in diesem Beispiel ich gemacht: http://jsfiddle.net/2f6qscrp/227/ Das Problem ist die ansprechende; Die Spalten gehen bei mobilen Geräten nach unten und bei größeren Geräten nach rechts/links, aber sie behalten immer noch den 2 Überlauf pro Spalte bei und erzeugen stattdessen einen Hauptüberlauf, der beide Spalten einschließt. Gibt es eine Möglichkeit, es zu beheben?

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

Dank

Answer 1

Versuchen Sie, diese

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

Demo - http://jsfiddle.net/2f6qscrp/228/

Answer 2

Wenn ich das richtig verstanden:

• Sie würden größere Bildschirme wie zwei Spalten zeigen (rot und blau in Ihre Mockups) , von denen jede unabhängig vertikal wie lang blättern kann, solange der Inhalt l ist genug zum Überlaufen.
• Auf kleineren Bildschirmen (mobil) möchten Sie, dass die zwei Spalten zu einer langen scrollbaren Spalte werden.

Sie können Medienabfragen verwenden, um dies zu erreichen. Zum Beispiel:

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

Hinzufügen, dass die Wirkung auf CSS Ihre JSFilddle die schaffen Ich glaube, Sie nach. Sie können Ihr Browserfenster erweitern und eingrenzen, um die Auswirkungen zu sehen.

(Quick Update:. Ich habe die Max-Breite von 600px als beliebige Mobilähnliche Maßnahme gewählt Sie können dieses Update nach Bedarf, im Idealfall auf der Grundlage der Art und Weise der Inhalt und das Layout in situ Arbeiten)