2016-02-26 89 views
-1

我正在寻找一个解决方案,让我做一个Div的移动与滚动。我想使它像下面的图片:Div的移动与滚动

enter image description here

所以框1和框2是div的,其与Div1构成/ Div2的区域内滚动移动。页脚是一个限制器。如果我们有一个非常高的页脚 - 方框1和方框2停留在Div1/Div2区域的末尾。

我还想在移动设备上这些项目不移动但是是静态的。

由于提前, 最好的问候, D.

回答

0

position:sticky会做等等http://www.sitepoint.com/css-position-sticky-introduction-polyfills/

移动这个

一个链接? https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

div { 
 
display:flex; 
 
} 
 
aside, main, footer, div div { 
 
    border:solid; 
 
    flex:1; 
 
    margin:5px; 
 
} 
 
main { 
 
    min-width:60%; 
 
    min-height:90vh 
 
} 
 
footer { 
 
    height:40vh; 
 
} 
 
aside div { 
 
    position:sticky; 
 
    top:0; 
 
    height:60vh 
 
} 
 
.bgr { 
 
    height:70vh; 
 
    }
<div> 
 
    <aside> 
 
    <div> sticky</div> 
 
</aside> 
 
<main> main</main> 
 
<aside> 
 
    <div class="bgr"> sticky</div> 
 
</aside> 
 
</div> 
 
<footer> 
 
    footer 
 
</footer>