使文本高度为 div 的 100%?

2024-01-14

我正在尝试使文本的高度为 100%div但它不起作用。
它只是变成了100%body { font-size:?; }.

有什么办法让它跟随div高度吗?
The div高度是整个页面的 4%,当您调整大小/更改分辨率时,我不希望文本跟随它。


为了获得我想要的结果,我必须使用以下代码:

// Cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('li.leaf.item');

// Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
   // Get the current height of the div and save it as a variable.
   var height = $div.height();
   // Set the font-size and line-height of the text within the div according to the current height.
   $div.css({
      'font-size': (height/2) + 'px',
      'line-height': height + 'px'
   })
}).trigger('resize');​

感谢 joshuanhibbert@css-tricks 的帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使文本高度为 div 的 100%? 的相关文章

  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p
  • 哪种 Javascript 解决方案(不是 .htc)可以真正在 IE7 和 8 中实现抗锯齿圆角?

    哪种 JavaScript 解决方案 不是 htc 确实可以在 IE7 和 8 中实现抗锯齿圆角CSS3在支持的浏览器中给出 我尝试了很多 http www ruzee com blog ruzeeborders http www ruze
  • 如何检测被覆盖的 CSS 属性?

    I can get all css properties for an element with document stylesheets but some of those are not active because those pro
  • CSS 边框底部的曲线

    我需要 CSS 中的这个图像 并且在这个边框内需要一个背景图像 我努力了 border radius 0 0 50 50 webkit border radius 0 0 50 50 但没有得到所需的形状 任何帮助 将不胜感激 边界半径 您
  • Bootstrap 标签栏平滑移动导航按钮

    我有一个用于切换块的普通引导选项卡面板 在导航中切换块时 活动选项卡会突出显示 但现在 当我单击活动选项卡的背景时 它会立即发生变化 是否可以使切换选项卡时背景不会立即改变 而是根据需要哪个选项卡而平滑地左右移动 这可以用以下方法完成吗cs
  • 从文本文件 PHP 读取数据

    我只是想知道如何在 php 中读取文本文件 我想让它显示文本文件中的最后 200 个条目 每个条目都在一个新行上 Like John White Jane Does John Does Someones Name 等等 Thanks Use
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 严格/过渡 DOCTYPE 之间的浏览器渲染差异

    前段时间我遇到了一个 问题 但我从未深入了解过 希望有人能够照亮它 当我将 DOCTYPE 从严格更改为过渡时 是什么导致某些浏览器 Chrome Opera 和 Safari 以不同方式呈现页面 我知道造成这种情况的一般原因是触发了怪异模
  • 简单的html css块结构,不能对内容div使用-headerHeight底部边距来避免滚动条吗?

    以下是我的简单 html css 结构
  • grid-auto-columns 在 Firefox 中不能完全工作

    我不明白为什么 DIV 3 的大小与 DIV 1 DIV 2 的大小不同 https codepen io anon pen vaVqPW https codepen io anon pen vaVqPW grid display grid
  • 滚动时输入自动完成位置错误(chrome)

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • Firefox Placeholder Before CSS 选择器不起作用

    我使用的是最新的firefox 30 0 我正在尝试在必填字段的占位符之前插入红色字体真棒星号 我在 Chrome 中工作没问题 但我在 FF 和 上遇到问题 这是一个说明我的问题的代码笔 http codepen io anon pen
  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然?

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • 我可以根据同一容器中另一个元素的大小强制内联文本换行吗?

    考虑这个 jsbin http jsbin com ElIKOKe 3 edit html css output 我有这个html div class container span The lime outlined container h
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘

随机推荐

  • 在 Next.JS 中的 `getStaticPaths` 中设置 `fallback: true` 时,` throw new Error('Failed to load static props')`

    参考讨论here https github com vercel next js discussions 11862 我遇到了类似的错误 当一切正常时fallback被设定为false 但是 当fallback设置为true时 next j
  • 如何在文件中给出的单词中查找字谜

    如何在文件中给出的单词中查找字谜 我的解决方案 对它们进行排序 然后查找重复项 O n mlgm n 单词数 m 单词的最大大小 还有更好的解决方案吗 thanks 这是一个没有排序的解决方案 我想我想出了一个新的解决方案 它使用算术基本定
  • 无法连接到(IP或域名)上的MySQL服务器

    我正在尝试配置网络服务器 Debian 7 我跟着这个tutorial http olange developpez com articles debian installation serveur dedie page page 2 感谢
  • 配置ElasticSearch的端口号

    我们使用 ElasticSearch 0 20 2 并使用以下命令运行守护进程 bin elasticsearch f bin elasticsearch脚本自己设置ES HOME 似乎没有办法 影响配置文件读取的路径 ES 总是从以下位置
  • 更新 Dojo 提供

    我在一个项目中使用 Dojo 1 9 但我不明白正确的替代方案dojo provide与传统风格相比 AMD 风格 我正在读书this http dojotoolkit org reference guide 1 9 dojo provid
  • Python 深度嵌套工厂函数

    在 学习Python 中遇到了工厂函数 本教科书示例有效 def maker N def action X return X N return action gt gt gt maker 2
  • 将字符串中的数字范围替换为单个数字

    有没有办法将字符串中的数字范围替换为单个数字 数字的范围可以是 n n 最有可能是 1 15 也可以是 4 10 范围可以用 a 表示 a lt I would like to buy 1 3 cats 或与单词 b 一起使用 例如 to
  • 跨两个数据源的事务管理(ChainedTransactionManager)-SpringBoot

    为什么 Spring ChainedTransactionManager 被弃用 spring 是否提供任何替代库来支持多个事务管理器 我的用例 我们正在构建一个连接到两个数据源 db1 和 db2 的 Spring Boot 应用程序 它
  • 正确停止 Tika 服务器

    为了启动可以从 localhost 以外的主机访问的 Tika 服务器 我们知道要走的路是 假设我有版本 1 7 并且想要在端口 9998 上运行 java jar tika server 1 7 SNAPSHOT jar host 0 0
  • 未捕获的类型错误:$(...).owlCarousel 不是函数

    我已将 owlCarousel 添加到我的页面 但我收到这个错误 并坚持了几个小时 HTML code custom js 中的函数 owl hero owlCarousel navigation true Show next and pr
  • 如何从 Twitter API 和趋势线获取关注者数量

    我正在为 Twitter 编写一些关于随时间推移的关注者数量的报告 但是经过大量搜索和反复试验后 我无法获得随时间推移的关注者数量 特别是过去的关注者数量 我知道有一个 API 可以获取关注者的个人 userId 但这对于我的需要来说有点过
  • Jenkins Subversion 签出失败 - “E175002:CRLF 预计在块末尾:-1/-1”

    我有一个 Jenkins v2 107 2 实例 作为 Windows 服务运行 它正在通过 Subversion 从 Visual SVN 服务器 在单独的 Windows PC 上 检查多个项目 其中一个项目 最大的 2 7GB 偶尔会
  • 如何使用 jquery 在 iframe 中选择标签?

    我试图弄清楚如何选择然后修改 HTMLiframe我生成 iframe 显示各种媒体 图像 pdf 等 为了显示不同的项目 我最初使用如下方式创建它 mydiv html 然后 根据需要 使用如下内容更新其内容 myiframe attr
  • 用于在 HTML 表中查找行索引的 jQuery 语法

    1 如何查找 HTML 表格中的行号 索引 生成的表没有任何行 ID 例如 我生成了一个纯 HTML 表格 其中有 10 行 我正在向该表动态添加行 在现有行之间 由于我要添加新行 现有的行索引将会更改 现在我需要在添加新行之前找到每行的索
  • 如何避免在 Windows 中过度填充 PATH 环境变量?

    我想知道您使用什么方法来管理系统中的可执行文件 例如 我几乎可以通过命令行访问所有内容 但现在我遇到了路径字符串的限制 因此我无法添加更多目录 那么你有什么推荐呢 很久以前 我尝试在属于该路径的目录中使用可执行文件的软链接 但这种方法不起作
  • 是否可以对两个转换字符组合使用格式修饰符?

    我知道如何使用 log4j 输出类名和方法名 这两个字段都可以单独对齐和填充 例如这个模式 d ISO8601 5p 10C 1 10M m n 产生类似的东西 2012 09 20 08 25 12 111 WARN Class meth
  • Windows 无法在本地计算机上启动 Apache CouchDB 服务

    我已在 Windows 计算机上安装了 CouchDB 但在启动 CouchDB 服务时 我收到如下消息 Windows 无法在本地计算机上启动 Apache CouchDB 服务 该服务没有返回错误 这可能是 Windows 内部错误或内
  • 使用bundle运行gitlab服务器:命令未找到错误

    我不知道发生了什么 sudo 服务 gitlab 启动 Starting both the GitLab Unicorn and Sidekiqscript web line 21 bundle command not found 查看我的
  • 如何在 cygwin 上安装 cURL?

    我尝试在 cygwin 上启用curl 但它说bash curl command not found 如何在 cygwin 上安装curl 我刚刚遇到这个 1 从以下位置找到cygwin setup exe文件http cygwin com
  • 使文本高度为 div 的 100%?

    我正在尝试使文本的高度为 100 div但它不起作用 它只是变成了100 body font size 有什么办法让它跟随div高度吗 The div高度是整个页面的 4 当您调整大小 更改分辨率时 我不希望文本跟随它 为了获得我想要的结果