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溢出

回答

相关问题