自学内容网 自学内容网
自学内容网 > 正文

css父容器溢出隐藏 子容器溢出滚动

🕗 发布于 2024-09-21 01:15 css  前端  

        在父容器上设置 overflow: hidden; 可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;。

HTML: 

<div class="parent">
  <div class="child">
    这里是一些可能会溢出的内容...
  </div>
</div>

CSS: 

.parent {
  width: 200px; /* 或者其他固定宽度 */
  height: 100px; /* 或者其他固定高度 */
  overflow: hidden; /* 隐藏溢出内容 */
}
 
.child {
  width: 300px; /* 超出父容器宽度 */
  height: 200px; /* 超出父容器高度 */
  overflow: auto; /* 在需要时显示滚动条 */
}

        .parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden; 隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。


原文地址：https://blog.csdn.net/u010234868/article/details/142211902

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • 算法笔试-编程练习-好题-07

    如果不熟悉python的底层的话，上面的程序看起来就是O(n)的时间复杂度。但是由于python的字符串类型的变量底层上是不可变的，因此每一次的+=，都需要经历：1）计算两边的字符串的长度，2）然后开

    阅读更多2024-09-22
  • 如何导出数据库时将ID也导出

    如果你使用的是某种框架或工具（如 Sequelize、Django ORM 等），可以考虑使用这些工具提供的迁移或数据导出功能。你可以使用 SQL 脚本导出数据库，包括表结构和数据。这种方式可以确保数

    阅读更多2024-09-22
  • Java stream流根据对象属性去重

    以下是一个示例，展示了如何根据对象的某个属性去重，并保留具有该属性值的第一个或最后一个遇到的对象。.values().stream().collect(Collectors.toList())：从Ma

    阅读更多2024-09-22
  • js进阶——函数作用域和块作用域

    理解这些作用域概念和使用场景，能帮助开发者更好地控制代码的可维护性与性能，特别是在处理复杂逻辑时，掌握作用域的原理能避免许多常见的 JavaScript 错误。IIFE 的核心特点是，它能够创建一个独

    阅读更多2024-09-22
  • 使用Properties

    iii.读写Properties时，使用getProperty()和setProperty()方法，不要调用继承自HashTabled的get()和put()方法（历史遗留问题）。i.它的Key-Va

    阅读更多2024-09-22
  • 招商银行招行笔试难度递增？要点解读

    星R] 行测55min 言语理解+数学计算+思维策略55题，每道题做完后不允许返回修改，这部分建议求稳为主，你永远不知道下一 [星R] 游戏化测评包括找不同、记忆题和小球追踪，整天难度也较大，但和性

    阅读更多2024-09-22
  • pytorch 同步机制

    在 PyTorch 中，当多个算子（operators）和内核（kernels）被并行执行时，PyTorch 通过 CUDA 的和机制来管理并发和同步。CUDA 是一个异步计算平台，计算任务会被放入一

    阅读更多2024-09-22
  • springboot集成rabbitmq

    注意：客户端和服务器端不能在同一个服务，必须分开两个服务写。只需要监听deadLetterQueue队列的消息。用于监听客户端发送过来的消息。

    阅读更多2024-09-22
  • IO流（java）

    IO流概述IO流的分类IO流总体来看就有四大流IO流的体系FilelnputStream（文件字节输入流）作用：以内存为基准，可以把磁盘文件中的数据以字节的形式读入到内存中去。构造器说明创建字节输入流

    阅读更多2024-09-22
  • WSL迁移Linux系统到非系统盘（完整实操版）

    本文提供了使用 WSL 将 Linux 系统迁移到非系统盘的详细指南。步骤包括确认系统存在、导出系统为 tar 包、删除原系统、在目标盘创建存放文件夹、导入 tar 包回 Linux 系统、验证迁移成

    阅读更多2024-09-22
自学内容网
Copyright © 2015-2024