你知道如何做一个像google plus或facebook那样的布局吗?你可以在google plus home上看到这样的例子,
一开始,如果你在主要内容中滚动页面,它们会一起滚动(好友帖子和侧边栏),但当你滚动到侧边栏的底部(好友帖子的右侧)时,该侧边栏将停止滚动,但另一个内容(好友帖子)仍会滚动。能给我解释一下怎么做这样的布局吗?示例代码或演示将非常有用。
我想要一种简单的方法来创建一个三列引导模板,它将有(1)左侧边栏,(2)中间/主要内容区域和(3)右侧边栏。
虽然在一个页面中创建3个引导列并不困难,但我的问题是如何在每个页面中包含相同的左右侧栏。
我知道我可以在一个页面中创建3列,如下所示
<div class = "container">
<div class = "row">
<div class = " col-lg-3"> Left column</div>
<div class = "col-lg-6"> M
我有一个问题的CSS计算返回错误的值为%。
我的想法是创建一个粘性的侧边栏,你首先滚动到最后,然后它会一直留在那里,直到内容结束。当我对div使用绝对高度时,它适用于vh单位,但当我使用%时,它就不起作用了。
.sidebar {
position: sticky;
top: calc(100vh - 100%); <-- does not work
top: calc(100vh - 1600px); <-- works as expected.
}
因此,我可能误解了%在这个上下文中的含义(我的理解是:应用.sidebar类的对象的高度),或者calc()不适合使用?
编辑: