我在网页的主要区域中有两列。左侧是包含链接的侧边栏。右一包含基于链接目标的内容。
我需要使左列和右列具有相同的高度,而不管其内容的数量如何。我也想使右列填充容器的右侧。
我认为提供最小高度或宽度会使设计无响应吗?
请在启动时查看以下演示。在下面的演示中,我输入了min-height,它使它无响应,因为在小型设备上查看时,左侧栏占据了很大的空间。
任何建议表示赞赏。
一种解决方案是使用CSS flexbox和媒体查询,以便equal
仅将类应用于更大的屏幕宽度。
@media screen and (min-width: 768px) {
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
}
更新的Bootply:http : //www.bootply.com/lyqtWesQhC
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句