鍍金池/ 問(wèn)答/HTML/ 利用 `position: fixed` 固定側(cè)欄，左欄滾動(dòng)，但是自適應(yīng)的時(shí)候使

利用 `position: fixed` 固定側(cè)欄，左欄滾動(dòng)，但是自適應(yīng)的時(shí)候使側(cè)欄消失，但是仍然占位？

是這樣的，我希望使整個(gè)頁(yè)面分為兩欄，左欄固定，右欄隨頁(yè)面滾動(dòng)。純 CSS 實(shí)現(xiàn)。

-------------------------
|       |               |
|       |               |
|   -   |       ?       |
|       |               |
|       |               |
-------------------------

用 positon: fixed 可以做到這個(gè)效果，但是添加了自適應(yīng)之后就不行了，這究竟是為啥子？

代碼如下：

# 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;
  }
}

或者說(shuō)有啥更好的辦法沒(méi)（最好是 CSS 的）？

補(bǔ)充以下效果：

當(dāng)寬度大于 768px 時(shí)一切正常，左欄固定，右欄可以滾動(dòng)；

當(dāng)寬度小于 768px 時(shí)，左欄消失，但是右欄還是存在 300px 的 margin-left

回答
編輯回答
怣痛

clipboard.png
是不是少寫了一個(gè)a
.aside{

}

2018年2月9日 12:38
編輯回答
離殤

看下這個(gè)對(duì)嗎
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body,.box{
            width: 100%;
            height: 100%;
        }
        .box{
            box-sizing: border-box;
            border: 1px solid red;
            position: relative;
        }
        .box-left{
            width: 300px;
            height: 100%;
            border-right: 1px solid red;
        }
        .box-right{
            position: absolute;
            left: 304px;
            right: 2px;
            top: 2px;
            bottom: 2px;
            border: 1px solid #000;
            overflow: auto;
        }
        .content{
            width: 100%;
            height: 1500px;
        }
        @media (max-width: 768px) {
            .box-left{
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-left">left</div>
        <div class="box-right">
            <div class="content">111111</div>
        </div>
    </div>
</body>

</html>

2017年5月24日 04:06