在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 利用 `position: fixed` 固定側欄，左欄滾動，但是自適應的時候使

利用 `position: fixed` 固定側欄，左欄滾動，但是自適應的時候使側欄消失，但是仍然占位？

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

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

用 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

回答
編輯回答
怣痛

clipboard.png
是不是少寫了一個a
.aside{

}

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

看下這個對嗎
<!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