是这样的,我希望使整个页面分为两栏,左栏固定,右栏随页面滚动。纯 CSS 实现。
-------------------------
| | |
| | |
| - | ↕ |
| | |
| | |
-------------------------
用 positon: fixed
可以做到这个效果,但是添加了自适应之后就不行了,这究竟是为啥子?
代码如下:
# HTML
<div class="container">
<div class="aside"></div>
<div class="main"></div>
</div>
# CSS
.container {
display: flex;
width: 100%;
}
.aside {
width: 300px;
position; fixed;
}
.main {
width: 100%;
margin-left: 300px;
}
@media (max-width: 768px) {
.main {
margin-left: 0;
}
.side {
display: none;
}
}
或者说有啥更好的办法没(最好是 CSS 的)?
补充以下效果:
当宽度大于 768px 时一切正常,左栏固定,右栏可以滚动;
当宽度小于 768px 时,左栏消失,但是右栏还是存在 300px 的 margin-left
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.