我可以根据基于百分比的宽度设置 div 的高度吗? [复制]

2024-05-01

假设我有一个宽度为 body 的 50% 的 div。如何使其高度等于该值?这样当浏览器窗口宽度为1000px时,div的高度和宽度均为500px。


这实际上可以仅使用 CSS 来完成,但 div 内的内容必须绝对定位。关键是使用百分比形式的填充和box-sizing: border-boxCSS属性:

div {
  border: 1px solid red;
  width: 40%;
  padding: 40%;
  box-sizing: border-box;
  position: relative;
}
p {
  position: absolute;
  top: 0;
  left: 0;
}
<div>
  <p>Some unnecessary content.</p>
</div>

根据您的喜好调整百分比。这里有一个JSFiddle http://jsfiddle.net/fadi/QzVF9/

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

我可以根据基于百分比的宽度设置 div 的高度吗? [复制] 的相关文章

  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 如何在有序列表中组合数字和字母?

    如何在 CSS 中用数字和字母递增有序列表 ol nested margin bottom 0 counter reset item ol nested li display block position relative ol neste
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常
  • 用纯JS检查元素是否有背景图片?

    检查特定元素是否具有的正确方法是什么background image与它相关联 在纯Javascript中 现在我有这个 var elementComputedStyle window getComputedStyle element va
  • 隐藏滚动条,但仍然可以滚动

    我希望能够滚动整个页面 但不显示滚动条 在谷歌浏览器中它是 webkit scrollbar display none 但 Mozilla Firefox 和 Internet Explorer 似乎不是这样工作的 我也在 CSS 中尝试过
  • 的 CSS margin-top 影响父级的边距

    我已经研究这个问题有一段时间了 但还没有找到直接的答案 当向元素添加页边距顶部时 就我而言 它主要发生在标题上 在许多情况下 边距顶部是与父级共享的 HTML div h1 My title h1 div CSS div padding 2

  • 角度材料在一个表单字段中输入和选择

    I want the input field and the drop down field in the same area like the one on the left I did this on the inspector 无论我
  • 使用 node-sass 监视整个目录时指定输出文件名

    目前 我可以在查看单个 SCSS 文件时使用 package json 文件中的 node sass build 命令指定文件名 sass build node sass src scss main scss dist css main m

随机推荐

  • 在 Emacs 中自动完成 Bibtex 文件中的 Pandoc 风格引文

    Pandoc 风格的引文 Pandoc http www johnmacfarlane net pandoc 使用 Markdown 格式 支持使用 BibTeX 文件中的键自动引用 该格式的一些示例如下 Blah blah doe99 B
  • 客户端和服务器的 Git 分支结构

    对于我的一门计算机科学课程 我和一个小组正在使用客户端 服务器架构编写一个应用程序 我很好奇在 Git 存储库中组织项目的最佳实践是什么 我的意思是 我们是否应该像这样构建目录 ProjectDir Clients Client1 file
  • 如何强制netbeans html自动完成使用双引号而不是单引号?

    我正在使用 NetBeans 7 3 我喜欢它的自动完成功能 然而在这个新的 7 3 版本中 当我输入
  • 熊猫系列名称

    我试图将我的系列命名为 Points 但它没有显示为 Points Points pd Series 1 2 3 print Points name output None 我什至尝试重命名它 但它仍然显示 无 Points rename
  • 增加图像亮度而不溢出

    我在尝试增加图像亮度时遇到问题 这是原始图像 我想要得到的图像是这样的 现在使用以下代码增加亮度 image cv2 imread home wni vbshare tmp a4 index2 png 0 if sum image 0 le
  • 在 Android 中打开受密码保护的 ZIP?

    有没有一个库或一个简单的方法如何在 Android 中打开受密码保护的 ZIP 存档 我知道 ZIP 加密有不同类型 我想打开最简单的一个 在 Unix 中使用以下命令创建zip e命令 可以在 Windows 中打开相同的文件 将要求输入
  • 复杂的 SOLR 查询,包括 NOT 和 OR

    我对 SOLR 搜索有一些相当复杂的要求 我需要针对标记内容的数据库执行这些搜索 我需要首先过滤数据库以获取与我的过滤器标签匹配的结果 任何具有黑名单中的标签的结果都应被删除 除非它们也包含白名单中的标签 假设我想检索所有标记为 森林 或
  • 使用 JavaScript 或 PHP 自动检测用户当前本地时间

    我经常需要根据用户的信息或受用户的影响来显示信息actual本地时间因时区而异 是否有可靠的方法来获取用户的当前时间和 或时区 关键的问题 服务器端代码基于网站主机或用户的ISP 客户端代码基于用户的系统时钟 太容易被操纵 关键问题 是否有
  • VBA Excel 2010 - 直接从剪贴板粘贴

    我正在尝试直接从剪贴板粘贴到 Excel 文档中并进行转置 Dim DataObj As MSForms DataObject Set DataObj New MSForms DataObject DataObj GetFromClipbo
  • 如何在 Android Studio 中使用 4 空格宽制表符?

    我正在 android studio 中创建一个 Flutter 应用程序 在 设置 gt 编辑器 gt 代码样式 gt Dart 下 我启用了 使用制表符 并将制表符大小和缩进更改为 4 然而 main dart 文件中似乎没有任何变化
  • 阿拉伯语的 tcpdf 将字符显示为问号 '?????? ???'

    我想创建一个阿拉伯语 pdf 与我的 ms Execl 格式的文件相同 在 php 中使用 tcpdf 创建 pdf 时 阿拉伯字符显示为 分数 这些字符是从我的 Excel 文件中复制的 htmlcontent2 span color 0
  • Mac SQLite 编辑器[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我知道可可MySQL http cocoamysql sourceforge net 但我还没有见过 SQLite 的 Mac GUI 有
  • 未定义的 C/C++ 符号作为运算符

    我注意到字符 符号 和 在 C C 中不用作运算符 有谁知道原因或历史原因吗 如果确实没有使用它 使用 define 将这些符号定义为另一个运算符 语句是否安全 通常情况下 define只接受宏名称中的有效标识符 所以你不能这样做 defi
  • 如何处理 Django 嵌套模板标签

    如何处理模板标记 内的变量 我需要为我的函数 send mail view 提供参数 urls py urlpatterns path send mail view
  • WebView2 下载进度

    需要通过WebView2获取下载进度 https learn microsoft com en us dotnet api microsoft web webview2 core corewebview2downloadoperation
  • 当我在角度中使用“key”而不是“keyCode”和“KeyboardEvent”时出现错误

    我正在尝试为输入字段 文本框 创建自定义指令 使其仅接受数字而不接受字母字符 我有以下 only numbers directive ts 文件 import Directive ElementRef HostListener from a
  • 使用 Huggingface 转换器进行命名实体识别,映射回完整实体

    我正在查看文档用于命名实体识别的 Huggingface 管道 https huggingface co transformers task summary html named entity recognition 我不清楚这些结果如何用
  • hapijs有过载保护之类的东西吗?

    如果 hapi 服务器过载 它会做什么 是否有类似的情况太忙js https www npmjs com package toobusy js通过快捷方式处理一些有错误的请求来防止服务器崩溃 是的 它嵌入在框架中 看看load关于连接set
  • C++11 的 &&(R 值引用)运算符是否废弃了“代理对象”设计模式?

    Scott Meyers 的第 30 项 更有效的 C http www amazon co uk More Effective Programs Professional Computing dp 020163371X绘制出 代理对象 编
  • 我可以根据基于百分比的宽度设置 div 的高度吗? [复制]

    这个问题在这里已经有答案了 假设我有一个宽度为 body 的 50 的 div 如何使其高度等于该值 这样当浏览器窗口宽度为1000px时 div的高度和宽度均为500px 这实际上可以仅使用 CSS 来完成 但 div 内的内容必须绝对定