时间戳

首页 > 解决方案 > 只有一列可滚动的网格布局

html - 只有一列可滚动的网格布局

问题描述

我想创建一个布局，其中左侧部分保持在同一个位置，只有右侧可以滚动。但是当我使用 position: fixed; 左侧部分变为视口的全宽和全高。

.container {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 40% 60%;
}

.left {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
}

.right {
    height: 200vh;
    background-color: blue;
}
<div class="container">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

标签： htmlcsscss-grid

解决方案

我创建了一个正确的内容，这会在右父 div 中溢出。

*{
   margin: 0;
   padding: 0;
 }
.container {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: 40% 60%;
}

.left {
    /*position: fixed;
    top: 0;
    left: 0;*/
   /* height: 100%;
    width: 100%;*/
    background-color: red;
}

.right {
    overflow-y: scroll;
    height: 100vh;
    background-color: blue;
}

.right_content{
   height: 200vh
 }
<div class="container">
    <div class="left">
  LEFT
    </div>
    <div class="right">
        <div class="right_content">RIGHT</div>
    </div>
</div>

推荐阅读