当前位置: 首页 > article >正文

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 容器的内容确实超出了其设定的宽度和高度,则会显示滚动条,允许用户滚动查看所有内容。


http://www.kler.cn/news/302428.html

相关文章:

  • 使用TLS解决Docker API暴露2375端口的问题
  • C++-----STL简介(了解)
  • 【数据结构】第八节:链式二叉树
  • 为什么学习Python数据分析?学会能干什么?python数据分析有什么用
  • 研1日记10
  • 保证缓存一致性
  • Debian11.9镜像基于jre1.8的Dockerfile
  • ppt图标去哪找?自带素材库的在线PPT软件,免费获取!
  • Caffenie配合Redis做两级缓存,Redis发布订阅实现缓存一致更新
  • 关于支付宝小程序客户端退出不了的问题的认知和退出的解决方案
  • Object Pascal 基本数据类型
  • 宝马销量崩了,自己作死拦都拦不住
  • 压测服务器并使用 Grafana 进行可视化
  • (不用互三)AI绘画工具大比拼:Midjourney VS Stable Diffusion该如何选择?
  • 【JUC】16-Java对象内存布局和对象头
  • C和指针:指针
  • 超越博士水平:OpenAI o1模型在科学和编程领域的卓越表现
  • 【专题】2024飞行汽车技术全景报告合集PDF分享(附原数据表)
  • SpringBoot学习(11)MongoDB使用
  • 栈和队列的算法题目(C语言)
  • 8月更新速递丨秋风送爽,EasyTwin产品能力升级不停~
  • 叉车智能ai防撞系统解决方案
  • TS 常用类型
  • 小程序的右侧抽屉开关动画手写效果
  • Linux网络服务只iptables防火墙工具
  • 网络编程day04(UDP、Linux IO 模型)
  • Hive SQL基础语法及查询实践
  • Linux网络:网络套接字-TCP回显服务器——多进程/线程池(生产者消费者模型)
  • “区块链积分系统:支付安全与效率的新篇章
  • 内外网文件安全交换如何做到?