问一个关于 CSS 的问题:侧栏固定

2017-12-10 23:21:14 +08:00
 xinhangliu

是这样的,我希望使整个页面分为两栏,左栏固定,右栏随页面滚动。纯 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

2816 次点击
所在节点    CSS
3 条回复
xinhangliu
2017-12-10 23:35:32 +08:00
已经搞定了,加了 `!important` 之后就有效了。但是还是不太明白,难道 media query 设置的 style 不是直接覆盖的?
rabbbit
2017-12-11 00:11:08 +08:00
position; fixed;
.side
因为你下边的那个类名写错了
xinhangliu
2017-12-11 07:54:31 +08:00
@rabbbit 感谢指出!不过原来是对的,v2 这里写错了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/413606

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX