固定元素的百分比宽度?

2023-11-24

我有这样的html:

<div id='content'>
    <div id='first'>...</div>
    <div id='second'>...</div>
</div>

#content
{
    width:100%;
    position:relative;
    padding:20px;
}

#first
{
    width:70%;
    position:relative;
}

#second
{
    width:70%;
    position:fixed;
}

这会导致第二个 div 比第一个 div 稍宽(准确地说是 40px),因为第一个 div 的 70% 是相对于内容宽度的(即 100% 减去每边 20px 的填充)。

第二个div的70%指的是什么?我怎样才能使两个div的宽度相同?


首先div的70%指的是宽度的70%#content.

第二div的70%指的是视口宽度的70%。

如果添加此 CSS,则两个div的宽度相同:

html, body {
    margin:0; padding:0
}

现场演示

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

固定元素的百分比宽度? 的相关文章

随机推荐

  • 如果没有连续的内存空间,realloc 会做什么?

    realloc用于动态重新分配内存 假设我已经使用分配了 7 个字节malloc函数 现在我想将其扩展到 30 个字节 如果内存中没有30字节的连续 单行连续 空间 后台会发生什么 是否有任何错误或者内存是否会被分段分配 realloc幕后
  • MS Visual Studio 2010如何使用.asm生成的文件

    我想询问一些我想尝试使用 Visual Studio 2010 的事情 我通过在项目属性 gt C C gt 输出文件 FAs 中将选项设置为 汇编器输出 从 cpp 文件生成 asm 文件 我的问题是 下一步如何使用 asm 生成的文件从
  • 子类 UITableViewCell 中的 UIButton 需要调用父类的方法

    很抱歉 如果答案已经存在 但我找不到 我有以下设置 MainViewController 它有一个大的 UITableView 和 CustomTableViewCell 它是 UITableViewCell 的子类 CustomTable
  • 无法创建多可用区 Aurora RDS 实例

    当我恢复 MySQL 快照时 我可以选择将新实例设置为多可用区 但是 由于某种原因 当我恢复到 Aurora 时 多可用区部署 选择被禁用 我想这可能意味着它会自动启用 但是 当我转到正在运行的实例详细信息时 它特别列出了多可用区 否 我有
  • 检查核心数据中是否设置了属性?

    如何检查核心数据对象中是否设置了属性 我将所有核心数据对象加载到目录中 var formQuestions Questions 我的核心数据 NSManagementObject 是 NSManaged var noticeText Str
  • 如何在 this.props.children 中访问 React 对象的类名

    在一个 React 组件渲染方法中 在 this props children 中有一些子组件 如何获取每个子组件的组件 类 名称以区分它们 React Children map this props children function c
  • 将 .DLL 转换为 .SO

    你们中的任何人都可以帮我将 Windows dll 文件转换为 so 文件吗 您可以尝试将 dll 的源代码重新编译为共享对象 This在确保代码确实可移植后 可能会帮助您入门 Edit Here is 还有另一个链接它可以帮助指导您完成使
  • Xcode 正在 OS X 对象而不是 iOS 对象中加载

    我有一个 iOS 窗口应用程序 直到今天它都可以与 Xcode 正常运行 当我在对象库中打开项目时 它似乎加载了所有 OS X 开发对象 并且我再也看不到任何可可触摸项目 如 UITextViews 等 我没有手动更改任何设置 所以我不确定
  • 如何更改现有表以在 Oracle 中创建范围分区

    我现有的表包含 10 年的数据 我已转储 我想在表中的一个日期键列上对现有表进行范围分区 我看到的大多数例子都是CREATE TABLE PARTITION BY RANGE 添加新分区 但我的表是现有的表 我想我需要一些ALTER陈述 A
  • 如何在 C++ 中声明原子向量

    我打算声明一个原子变量向量 用作多线程程序中的计数器 这是我尝试过的 include
  • 在曲线边缘绘制箭头

    灵感来自这个问题在 Ask sagemath 什么是best将箭头添加到生成的曲线末尾的方法Plot ContourPlot ETC 这些是高中时看到的绘图类型 表明曲线从页面末尾继续延伸 经过一番搜索 我找不到内置的方法或最新的包来执行此
  • std::launder 如何影响容器?

    考虑以下固定大小向量的简化且不完整的实现 template
  • Find() 与 FirstOrDefault() 的性能[重复]

    这个问题在这里已经有答案了 类似问题 Find 与Where FirstOrDefault 在具有单个字符串属性的简单引用类型的大序列中搜索 Diana 得到了一个有趣的结果 using System using System Collec
  • Alamofire:[结果]:失败:错误域=NSURLErrorDomain代码=-999“已取消”

    我正在连接的服务使用自签名证书 出于开发目的 我不想验证该链 将 swift 3 与 Alamofire 4 结合使用 相应地修复了 ATS
  • 从文件中删除所有以 # 开头的行

    文件中所有带有注释的行都以 如何删除以以下内容开头的所有行 并且仅删除那些行 其他行包含 但不在行开头的应被忽略 这可以通过sed 单行 sed d 这表示 找到所有以 开头的行并将其删除 保留其他所有内容
  • 在运行时,Swift 如何知道要使用哪个实现?

    protocol A func f struct S1 A func f print S1 struct S2 A func f print S2 let array A S1 S2 for s A in array s f S1 n S2
  • 创建两个二维 pandas 数据框的组合

    我有两个 pandas 数据框 df1 和 df2 我想创建一个数据框 df3 其中包含使用 df1 中的一列和 df2 中的一列的所有组合 低效执行此操作的伪代码如下所示 df3 for i in df1 for j in df2 df3
  • 错误“env”未被识别为内部或外部命令?

    我是node js的新手 我已经安装了node js并使用command npm v检查了它的工作正常 我尝试测试它构建开源项目 github https github com quran quran com frontend 运行该项目的
  • 使所有图像在引导程序中以相同的高度显示

    我试图使所有一行 4 个图像都具有相同的高度尺寸 我已经尝试使用 css 来调整宽度和高度 但似乎没有任何效果 纵向图像最终总是比横向图像高 这是代码 div class container div class jumbotron styl
  • 固定元素的百分比宽度?

    我有这样的html div div div div div div content width 100 position relative padding 20px first width 70 position relative seco