element在高度不固定的情况下设定滚动条滚动条不溢出

𝕷𝖎𝖑𝖏𝖆𝖈𝖐 · 发表于 2022-5-30 19:45:43

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

VUE 经验
在高度不固定的情况下设定滚动条滚动条不溢出

DIV 最上层如不是 display: flex;flex-direction:column;
则添加一个子层做 display: flex;flex-direction:column;

DIV 主层加属性
flex: 1;overflow-y: auto;flex-basis: 0

下层内容加
<el-scrollbar></el-scrollbar>

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-17 08:24:29

在Vue中，如果你希望在一个高度不固定的容器中设置滚动条，并且确保滚动条不会溢出，可以按照以下步骤来实现：

1. **外层容器**：确保外层容器使用 `display: flex;` 并且 `flex-direction: column;`，这样可以让子元素在垂直方向上排列。

2. **主内容容器**：在主内容容器上设置 `flex: 1;` 和 `overflow-y: auto;`，这样可以让内容区域自动填充剩余空间，并且在内容超出时显示滚动条。

3. **内容区域**：确保内容区域的高度不会超出主内容容器的高度。

以下是一个示例代码：

<template>
<div class="outer-container">
<div class="header">
头部内容
</div>
<div class="main-content">
<div class="scrollable-content">
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: '内容1' },
{ id: 2, text: '内容2' },
// 更多内容...
]
};
}
};
</script>
<style>
.outer-container {
display: flex;
flex-direction: column;
height: 100vh; /* 假设外层容器高度为视口高度 */
}
.header {
/* 头部样式 */
padding: 10px;
background-color: #f0f0f0;
}
.main-content {
flex: 1;
overflow-y: auto;
flex-basis: 0;
}
.scrollable-content {
/* 内容区域样式 */
padding: 10px;
}
</style>

复制代码

### 解释：
- **外层容器 (`outer-container`)**：使用 `display: flex;` 和 `flex-direction: column;` 来确保子元素在垂直方向上排列。
- **头部 (`header`)**：头部内容固定高度，不会随内容滚动。
- **主内容容器 (`main-content`)**：使用 `flex: 1;` 来填充剩余空间，`overflow-y: auto;` 来在内容超出时显示滚动条，`flex-basis: 0;` 来确保内容区域从0开始计算高度。
- **内容区域 (`scrollable-content`)**：内容区域的高度会自动适应主内容容器的高度，并且在内容超出时显示滚动条。

通过这种方式，你可以确保在高度不固定的情况下，滚动条不会溢出，并且内容区域可以正常滚动。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 2025-3-20 11:56:34

在Vue.js中，如果你需要在高度不固定的情况下设置滚动条并且确保滚动条不溢出，可以按照以下步骤进行设置。这个方法适用于任何需要动态高度的容器，包括在Discuz插件开发中可能遇到的场景。

### 1. 外层容器设置
首先，确保外层容器使用 `display: flex;` 并且 `flex-direction: column;`。这样可以让子元素在垂直方向上排列，并且可以根据内容动态调整高度。

<div class="outer-container">
<div class="inner-container">
</div>
</div>

复制代码

.outer-container {
display: flex;
flex-direction: column;
height: 100%; /* 或者根据需要设置固定高度 */
}

复制代码

### 2. 内层容器设置
内层容器需要设置为 `flex: 1;`，并且添加 `overflow-y: auto;` 和 `flex-basis: 0;`。这样可以让内层容器在垂直方向上占据剩余的空间，并且在内容超出时显示滚动条。

.inner-container {
flex: 1;
overflow-y: auto;
flex-basis: 0;
}

复制代码

### 3. 内容区域
内容区域可以自由放置内容，内层容器会根据内容的高度自动调整，并且在内容超出时显示滚动条。

<div class="inner-container">
<div class="content">
</div>
</div>

复制代码

### 4. 完整示例
以下是一个完整的示例，展示了如何在Vue.js中实现这个布局：

<template>
<div class="outer-container">
<div class="inner-container">
<div class="content">
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
<p>这里是内容区域，内容可以很多，超出时会显示滚动条。</p>
</div>
</div>
</div>
</template>
<style scoped>
.outer-container {
display: flex;
flex-direction: column;
height: 100vh; /* 或者根据需要设置固定高度 */
}
.inner-container {
flex: 1;
overflow-y: auto;
flex-basis: 0;
}
.content {
padding: 20px;
}
</style>

复制代码

### 5. 解释
- **`display: flex; flex-direction: column;`**：外层容器使用 Flexbox 布局，并且子元素在垂直方向上排列。
- **`flex: 1;`**：内层容器会占据剩余的空间。
- **`overflow-y: auto;`**：当内容超出内层容器的高度时，显示垂直滚动条。
- **`flex-basis: 0;`**：确保内层容器的基础高度为0，以便它可以根据内容动态调整高度。

### 6. 注意事项
- 确保外层容器有明确的高度（例如 `height: 100vh;` 或 `height: 500px;`），否则内层容器可能无法正确计算高度。
- 如果外层容器的高度是动态的（例如根据窗口大小变化），可以使用 `height: 100%;` 或者通过 JavaScript 动态设置高度。

通过这种方式，你可以在高度不固定的情况下实现滚动条的功能，并且确保滚动条不会溢出。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。