有没有一种 CSS 唯一的方法来完全隐藏部分溢出的元素?

2024-04-26

想象一下,您有一个元素的高度是浏览器窗口高度的百分比。该元素包含一堆块元素。

有没有办法使用类似的东西overflow: hidden但要确保最后一个块元素在溢出时完全隐藏而不是部分隐藏?

(使用 JavaScript 很容易做到这一点,但我更喜欢使用样式表来解决这个问题。)


2013年还不可能,但现在所有IE

基本思想是将弹性项目包裹在可见区域之外。

Remove overflow: hidden;查看物品的去向。

$('.parent').ready(function() {
  $('.parent').resizable();
})
* {
  box-sizing: border-box;
}
.parent {
  height:288px;
  width: 233px;
  border: 5px dashed blue;
  background: yellow;
  
  display: flex;
  flex-flow: column wrap;
  overflow: hidden;
}

.child {
  height: 100px;
  width: 100%;
  border: 5px solid brown;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="parent">
<div class="child">0</div>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

有没有一种 CSS 唯一的方法来完全隐藏部分溢出的元素? 的相关文章

  • 将 PhotoSwipe 配置为不使用整个窗口?

    我目前正在尝试使用构建移动图片库照片滑动 http photoswipe com 我已经能够让它工作了 但有一个小问题 当我 单击照片缩略图 实际照片总是占据整个 视口 当您在移动设备上查看图库时 这是可以的 但是 如果您的视口是计算机屏幕
  • 淡化背景但不淡化文本

    我已经对 div 应用了 CSS 淡入 淡出解决方案 在很大程度上我对此感到满意 但是我只想将其应用于背景 而不是文本 我需要文本始终完全不透明 参见示例 http jsfiddle net howiepaul gUAPV 33 http
  • 响应式三角形div

    我正在尝试创建一个响应式三角形div它将作为标题位于页面顶部 我能够通过以下代码实现这一点 div width 0 height 0 border style solid border width 200px 400px 0 0 borde
  • 是否可以使 font-weight:bold 等于 500 而不是 700?

    我刚刚使用 Google Fonts 并发现了 Fira Sans 字体 很好 但我不喜欢 Bold 700 风格 它太大胆了 不符合我的喜好 但是 如果我选择中 500 样式 浏览器不会将其用于任何设置为font weight bold
  • 双向 CSS 高度动画

    keyframes mgm from max height 250px to max height 0px mgm width 180px border 1px solid black padding 10px animation mgm
  • 在多个 Compass 项目中加载全局 SASS 文件

    我想创建一个多个 Compass 项目将访问的 SASS 文件目录 该目录将包含许多具有相似样式 表单元素 clearfixes 重置等 的常见元素的 SASS 文件 我希望在多个项目中访问和使用这些元素 如何在多个项目中包含这个全局 SA
  • 在 Safari 中转换变换和大小 (9.1)

    我试图在元素上实现平滑过渡transform translate 和一些其他属性 是的 我读过有关匹配供应商前缀的内容 它在 Chrome 和 FF 中工作正常 但在 Safari 中它不能平滑地动画转换 在最后跳转 在应用翻译之前 它似乎
  • 将 div 的内容垂直居中(不是按行高)

    我有一个 div 我需要将其内容垂直居中 div Free coffee for all the people who visit my restaurant div coffee line height 235px width 300px
  • 使用 CSS3 计算值

    CSS3有没有办法实现这一点 height 100 110px 我的背景 你不能用纯 CSS 来计算它 正如 Litek 提到的 它不适用于所有浏览器 但是有一种组织方法可以处理这个问题 但是您需要将元素包装在另一个浏览器中 body he
  • 单击其他 div 时切换类中的单个元素 Jquery

    我正在尝试为 WordPress 构建设置一个简单的评论切换 CSS div class commenttoggle p class popcom Show Comments p Clickable Button div div class
  • Bootstrap 3 网格,一行中有多少列“真的”重要吗?

    我有一个表单布局 上面有 Bootstrap 3 表单组 我希望这些表单组在 我显然让它工作得很好 但是在这里阅读了一些内容后 我所做的似乎违反了假设的规则 即一行中的每一列加起来必须等于 12 但是我能找到的每个教程和文档总是使用诸如 应
  • 使列在引导程序中固定位置

    使用 Bootstrap 我有一个网格列 class col lg 3 我想将其放置在位置 固定 而另一个 col lg 9 是正常位置 可滚动页面 div class row div class col lg 3 Fixed conten
  • 如何隐藏表格行溢出?

    我有一些 html 表 其中文本数据太大而无法容纳 因此 它垂直扩展单元格以适应这种情况 因此 现在存在溢出的行的高度是数据量较小的行的两倍 这是无法接受的 如何强制表格具有相同的行高1em 这是一些重现该问题的标记 表格应该只有一行的高度
  • Bootstrap 4 navbar-inverse 没有颜色

    最近我决定尝试新的引导程序版本 4 我对文件做了所有正确的事情 下面是我的html
  • 对于固定的 960px 布局,我应该在 twitter bootstrap 中设置哪些值?

    我正在使用 twitter bootstrap 并且从 github 克隆了 less 我想设置网格宽度变量 因为我需要 960px 固定布局 940px 宽度的默认值为 gridColumns 12 gridColumnWidth 60p
  • 如何覆盖!重要?

    我创建了一个自定义样式表 它覆盖了我的 WordPress 模板的原始 CSS 但是 在我的日历页面上 原始 CSS 将每个表格单元格的高度设置为 important宣言 td height 100px important 有什么方法可以覆
  • 如何偏移网格项目,同时移动其兄弟项目? [复制]

    这个问题在这里已经有答案了 我正在使用 CSS 网格 我想偏移一个元素 以便它在网格列上水平移动 我还希望这个元素保留其当前宽度 并应用偏移值此外到元素的宽度 Example container display grid grid temp
  • 在 CSS 中设置 TableView 样式 (JavaFX)

    如何在 TableView 中设置 THIS 点的样式 我的 CSS 代码如下所示 Empty Stylesheet file root fx background color 262626 table view fx background
  • CSS:它渲染“ul > li”比“ul li”更快吗?

    正如我从少数人那里听说的那样 使用 gt 而不是 使渲染速度更快 slide hover gt div gt span border color c8c8c8 OR slide hover div span border color c8c
  • 标记内嵌套块级元素...对还是错?

    嵌套在语法和语义上是否正确 div 或任何其他块级元素内 p 标签 我说的是 HTML4 过渡 DTD 如果没有那么可以使用 span style display block 反而 从语法上来说 一个div里面一个p在所有 HTML 标准中

随机推荐

  • 可以从 Angular ng-click 表达式调用“alert()”或“console.log()”吗?

    我试图测试我的ng click绑定正在工作 但我似乎遇到了一个更基本的问题 如何查看正在发生的事情 或没有发生 我常用的 粗暴 调试方法 alert and console log 似乎不可用 是否可以从 Angular 应用程序中访问这些
  • jQuery:处理 id 属性中的空格

    我有一个 id A B 的元素 下面的代码fails
  • Google App Maker 将记录保存到数据库每条记录需要 240 毫秒

    我们有一个使用 Google Cloud SQL 表的 Google App Maker 应用 我们的位置是中欧布拉格 保存一项记录至少需要令人难以置信的 240 毫秒 看起来 Google 应用制作工具在我的位置附近有一个代理 延迟约 2
  • 当您的 ant 构建过程在版本控制上崩溃时该怎么办

    所以我有一个很好的 Java 项目 使用 Ant 构建到 dist 文件夹 整个项目处于版本控制之下 因此我只需通过 dist 文件夹路径上的 svn导出 即可部署最新版本 但我的构建不断删除 dist 文件夹内的 svn 文件夹及其所有依
  • D3 数据对象内的循环数组

    data name c1 id 4690 day 1 3 start 8 00 end 10 00 name c3 id 5283 day 3 4 start 8 00 end 17 00 name c4 id 4862 day 4 sta
  • 为什么要在 php 中使用异常处理?

    我已经编写 PHP 很长一段时间了 但对 PHP 5 的了解并不多 我了解 PHP 5 中的异常处理已经有一段时间了 但从未真正研究过它 经过快速谷歌后 使用异常处理似乎毫无意义 我看不出使用它比仅使用一些 if 语句 也许还有我自己的错误
  • 如何中断 java.util.Scanner nextLine 调用

    我正在使用多线程环境 其中一个线程通过重复调用不断侦听用户输入scanner nextLine 要结束应用程序 此运行循环将由另一个线程停止 但侦听线程不会停止 直到最后一个用户输入完成 由于nextLine 关闭流似乎不是一个选择 因为我
  • 异常:无效参数:continuationToken

    我正在尝试使用 工作示例 线性迭代器 来实现一个简单的延续令牌这个帖子 https stackoverflow com questions 45689629 how to use continuationtoken with recursi
  • NSFetchedResultsController XCode 7 问题

    Xcode 7 beta 6 和 NSFetchedResultsController 今天让我头疼 如果我使用 Xcode 6 编译相同的代码 使用 Swift 2 修复 程序可以在设备和模拟器 iOS 7 iOS8 上运行 但是 如果我
  • 如何更改更新数据库 ef 迁移的连接字符串?

    我正在尝试运行 Update Database 并且想指定连接字符串 但 CLI 正在查看错误的字符串 我的 appsettings json 文件中有两个连接字符串 Logging IncludeScopes false LogLevel
  • iOS/Objective-C 的 switch 语句中的失败

    假设我有一个包含五个案例的 switch 语句 但只有两个真正的方法被调用 如下所示 switch condition case conditionOutcome1 self firstMethod break case condition
  • 如何在隐身模式下启用 chrome 扩展的 pageAction 图标?

    即使选择 允许在隐身模式 后 使用 pageaction 在某些网址中呈现的扩展也不会在隐身模式下显示 background js 有以下内容 chrome runtime onInstalled addListener function
  • 使用WebView setHttpAuthUsernamePassword?

    我正在尝试进行基本身份验证以查看受保护的网址 我想访问受保护的网址 如下所示 http api test com userinfo vid 1234 所以我用 WebView 执行以下操作 mWebView setHttpAuthUsern
  • 如何在 Flutter 中保存用户登录详细信息?

    我是颤振新手 想要制作一个只有经过身份验证的用户 通过填写电子邮件和密码 才能使用的应用程序 所以我正在考虑制作一个名为的根小部件Authentication我将在其中检查用户是否经过身份验证 如果他们是那么带他们去Home Widget
  • ASP.NET MVC 4 cookie 消失

    我有一个 ASP NET 应用程序 它将身份验证 cookie 发送到 ASP NET MVC 应用程序 用作后台应用程序 我添加了一个全局过滤器 用于检查身份验证 cookie 的每个控制器操作 如果cookie存在 则允许用户进入该页面
  • 使用php在两个日期之间选择MS访问

    我想使用 php 从 ms access 选择数据 这是我的代码 dbdir D payroll2 ATT2000 MDB conn odbc connect DRIVER Microsoft Access Driver mdb DBQ d
  • 使用另一个视图控制器中的原型单元

    我想在多个故事板场景中使用相同的表视图单元格布局 我可以在其中一个场景中设计原型单元并以某种方式在另一个表视图控制器中访问它 即 dequeueReusableCellWithIdentifier 吗 这是不可能的 但您可以将原型单元格从源
  • 使用Boost获取成员函数的数量和参数类型? (升压::function_traits)

    对于普通的普通函数来说 它工作得很好 下面的代码工作得很好 它只打印应该的内容 int cdecl int char 2 int char include
  • 如何模拟 TCP/IP 错误?

    在多层应用程序上 我需要模拟各种 TCP IP 错误来测试一些重新连接代码 有谁知道我可以使用什么工具 基于 Windows 来实现此目的 谢谢 Scapy http secdev org projects scapy 允许您控制数据包的各
  • 有没有一种 CSS 唯一的方法来完全隐藏部分溢出的元素?

    想象一下 您有一个元素的高度是浏览器窗口高度的百分比 该元素包含一堆块元素 有没有办法使用类似的东西overflow hidden但要确保最后一个块元素在溢出时完全隐藏而不是部分隐藏 使用 JavaScript 很容易做到这一点 但我更喜欢