当前位置: 首页 > 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/a/302428.html

相关文章:

  • 虚幻引擎 CEO 谈元宇宙:发展、策略与布局
  • nginx配置负载均衡详解
  • Spring MVC 与 JSP 数据传输
  • flink sql + kafka + mysql 如何构建实时数仓
  • 计算机毕业设计Python+Neo4j知识图谱医疗问答系统 大模型 机器学习 深度学习 人工智能 大数据毕业设计 Python爬虫 Python毕业设计
  • GaussDB部署架构
  • 使用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语言)