css布局怎么保证右边一直在可视范围内？

如下：灰色和红色的高度都不确定，怎么保证左边高度太高需要滚动时右边一直能在可视范围内？

<script setup lang="ts">
import {ElRow,ElCol} from 'element-plus'
</script>

<template>
<div>
  <ElRow :gutter="10">
    <ElCol :span="12">
      <div class="h-[1900px] bg-gray-500"></div>
    </ElCol>
    <ElCol :span="12">
      <div class="bg-red-600 h-[200px]"></div>
    </ElCol>
  </ElRow>
</div>
</template>

<style scoped>

</style>

css

阅读 1.9k

5 个回答

得票最新

along

2.8k1329

发布于
2 月 7 日俄罗斯

实现效果：http://43.143.65.230/demo/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fixed Right Div</title>
    <style>
      .container {
        display: flex;
      }
      .left {
        width: 60%;
        background-color: gray;
        padding: 20px;
        box-sizing: border-box;
      }
      .right {
        width: 40%;
        background-color: red;
        padding: 20px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        right: 0;
        height: 20vh; /* 高度 */
        overflow-y: auto; /* 如果右侧内容超出屏幕高度，允许滚动 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        <p>左侧内容，高度可能很高，需要滚动。</p>
        <p style="height: 2000px">滚动内容</p>
      </div>
      <div class="right">
        <p>右侧内容，始终在可视范围内。</p>
      </div>
    </div>
  </body>
</html>

Meathill

22.5k133642

发布于
2 月 7 日广东

需求没说完整？右边 position: fixed 不就好了？

rain

5036116239

发布于
2 月 7 日广东

更新于
2 月 7 日

<style>
.gray {
  display:inline-block;
  width:60%;
  height:996px;
  background-color:gray;
  margin-right:1%
}
.red {
  position:fixed;

  display:inline-block;
  width:24%;
  height:60px;
  background-color:red;
}
</style>

<div class="gray"></div>
<div class="red"></div>