V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
xinhangliu
V2EX  ›  CSS

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

  •  1
     
  •   xinhangliu · 2017-12-10 23:21:14 +08:00 · 2671 次点击
    这是一个创建于 2300 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    3 条回复    2017-12-11 07:54:31 +08:00
    xinhangliu
        1
    xinhangliu  
    OP
       2017-12-10 23:35:32 +08:00
    已经搞定了,加了 `!important` 之后就有效了。但是还是不太明白,难道 media query 设置的 style 不是直接覆盖的?
    rabbbit
        2
    rabbbit  
       2017-12-11 00:11:08 +08:00
    position; fixed;
    .side
    因为你下边的那个类名写错了
    xinhangliu
        3
    xinhangliu  
    OP
       2017-12-11 07:54:31 +08:00 via Android
    @rabbbit 感谢指出!不过原来是对的,v2 这里写错了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3694 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 10:25 · PVG 18:25 · LAX 03:25 · JFK 06:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.