CSS - 相对定位的父div不拉伸到绝对子div高度

2024-07-01

我整个早上都在谷歌上搜索这个,但似乎无法让它发挥作用:

我有一个具有相对定位的父 DIV 和一个位于其中的两列子 DIV 设置,两者都定位为绝对。 我需要父 DIV 的高度与内部 DIV 的内容一起拉伸。

我尝试在#content 的结束标记之前放置一个 .clearfix 类型位,但我没有浮动任何内容。我还尝试向 #content div 添加浮动属性,但无济于事。谁能在这里指出正确的方向。显然,我遗漏了嵌套显示如何相互影响的一些内容。

CSS:

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol {
    width: 500px;
    position: absolute;
}

#rightcol {
    width: 270px;
    position: absolute;
    left: 500px;
    margin-left: 10px;
    text-align: center;
}

HTML:

<div id="content">
    <div id="leftcol">
        <p>Lorem Ipsum</p>
    </div><!-- /leftcol -->
    <div id="rightcol">
        <img src="images/thumb1.jpg">
        <img src="images/thumb2.jpg">
    </div><!-- /rightcol -->
    <br style="clear:both;">
</div><!-- /content -->

原力的黑暗面是通往许多被一些人认为不自然的能力的途径。

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});​
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS - 相对定位的父div不拉伸到绝对子div高度 的相关文章

  • Webkit 和 jQuery 可拖动跳跃

    作为实验 我创建了几个 div 并使用 CSS3 旋转它们 items position absolute cursor pointer background FFC400 moz box shadow 0px 0px 2px E39900
  • 有人知道 pinterest.com 中的 div 是如何发出的吗?

    我尝试像这样水平渲染我的 div 图像 从左到右 从上到下 但这并不完全正确 想知道是否只是垂直完成每列的渲染 从上到下 从右到左 有人知道如何模仿 复制此页面吗 更新 为了回应下面的答案 我快速搜索了 砖石与同位素 下列post http
  • 如何使用 Jsoup 仅删除文本中的 html 标签?

    我想使用 JSOUP 从文本中仅删除 html 标签 我使用了这里的解决方案 我之前关于 JSOUP 的问题 https stackoverflow com questions 33466557 jsoup remove only html
  • Bootstrap 3 - 对齐列高

    创建一个用于教育目的的网站 但我遇到了网格 列高度问题 这是我尝试复制的网站图像 Click me https i stack imgur com dge5f jpg 这是我到目前为止所得到的 Click me https i stack
  • 阻止 Firefox 在刷新后恢复先前用户输入的状态

    我有一个带有多个复选框的页面 需要表示数据库中的状态 这些复选框是 AJAX 驱动的 因此当选中一个复选框时 就会发送一个请求来更新数据库中的状态 如果他们的视图已过时 则受影响 相关复选框的视图将更新 并通知用户 并且必须重试 当我刷新时
  • 除非选择单选按钮,否则如何使复选框变灰?

    对于 javascript 来说非常陌生 但是任何帮助我入门的帮助将不胜感激 我有一个简单的表格 div div
  • 输入宽度与文本区域宽度

    读完主题后输入尺寸与宽度 https stackoverflow com questions 1480588 input size vs width 我很清楚我们不应该使用 size 属性而应该使用 css 样式 输入 文本 和文本区域显示
  • 冻结 TH 标题和滚动数据

    我有一个 html 表 我想冻结标题行标签以滚动数据 我怎样才能做到这一点 我需要使用Dom吗 谢谢 我的解决方案是使用两个表并固定列宽 下面的表格位于可滚动的 div 中 并且没有标题
  • 使用查询字符串使缓存失效,这是不好的做法吗?

    在我制作的网站上 我通常使用查询字符串参数使 CSS 和 JS 的缓存无效 如下所示 注意 这是 chrome 检查器的屏幕截图 这些查询字符串都是由我在渲染到浏览器中时制作的小系统自动附加的 一位朋友现在告诉我 使用查询字符串的缓存效果不
  • Bootstrap 4 手风琴 切换全部

    我正在尝试切换状态all通过单击按钮来折叠项目 默认情况下我希望它们全部关闭 该按钮应该Open All or Close All 根据docs https getbootstrap com docs 4 0 components coll
  • javascript 中可滚动区域/div 的增量单位?

    在 javascript 中我可以确保我的大 div 垂直滚动 仅以 比方说 16 像素为单位 在 Java 中 这些被称为 增量单位 我在 javascript 中找不到类似的东西 我想确保部分滚动时的某个区域 div 始终是视图 16
  • 如何禁用图像上的高亮显示

    I m trying to disable highlight on an image when I drag my mouse over an image it is highlighted Take a look 多谢 Use 用户选择
  • 使用 Javascript 隐藏数据网格列?

    我有一个包含大约 20 列的 net 数据网格 我需要使用 JavaScript 通过单击按钮来切换列的可见性 有任何想法吗 您想使用 COLGROUP 来执行此操作 否则您必须应用样式every细胞开启everyrow 这将非常低效 并且
  • 如何通过PHP获取div?

    我得到一个页面使用file get contents来自远程服务器 但我想过滤该页面并从中获取一个使用 PHP 具有 text 类的 DIV 我开始于DOMDocument但我现在迷路了 有什么帮助吗 file file get conte
  • document.styleSheets[x].cssRules 为 null

    当我检查网站时 我看到 cssRules 来自document styleSheets x cssRules 然而 通过这个网站stackoverflow com 当我用 Chrome 浏览器检查时 我看到document styleShe
  • 如何防止图像溢出圆角框?

    如果我使用此代码 图像不会被 div 的圆角剪切 导致图像的方角覆盖 div 的圆角 div img src big image jpg div 有谁知道如何获得圆角 div 来防止子图像溢出 我最新的 Chrome Firefox 和 S
  • Swift - 将 HTML 文本转换为属性字符串

    在我的一个模块中 我想使用 UILabel 将多语言 HTML 文本 英语和泰米尔语 显示为 NSAttributedString 如果文本是纯英文 我可以按照我的愿望显示它 但我的内容同时包含英语和泰米尔语字符 我该如何处理这种情况 如果
  • Javascript:单击正文中除其中一个元素之外的任何位置

    我希望能够单击正文中除该特定元素之外的任何位置 我无法找出我所做的代码有什么问题 当我单击一个特定元素时 except inside body 我不想让它隐藏 但是当我点击body它应该隐藏 HTML
  • HTML5离线缓存谷歌字体API

    我正在尝试创建一个离线 HTML5 测试应用程序 并同时使用新的 google fonts api 有谁知道如何缓存远程字体 简单地将 api 调用放入缓存清单中是行不通的 我认为这是因为 api 实际上加载了其他文件 ttf eot 等
  • VueJs 操作内联模板并重新初始化它

    这个问题类似于VueJS 在内联模板组件中重新编译 HTML https stackoverflow com questions 34087195 vuejs re compile html in an inline template co

随机推荐

  • React Native:找不到变量:需要

    我正在尝试修改一个反应原生样板 https github com rayandrews razzle rnw redux loadable这样我就可以在Android平台上运行了 I installed the expo package a
  • 独立 Spring OAuth2 JWT 授权服务器 + CORS

    所以我有以下浓缩的授权服务器这个例子 https github com dsyer spring security angular blob master oauth2 authserver src main java demo Auths
  • 分页打印所有数据

    我在打印数据表中具有分页的所有数据时遇到问题 我已经做过研究并在此链接中发现了同样的问题 仅打印 https stackoverflow com questions 468881 print div id printarea div onl
  • Erlang 映射:remove/2 和映射:without/2 之间的实际区别

    检查过R17 新功能之一的文档 http www erlang org doc man maps html remove 2 地图 让我看到了maps remove 2 和maps without 2 我能看到的唯一明显的区别是 remov
  • 如何在不重新加载页面的情况下刷新角度8中的元素?

    我正在通过单击按钮更新数据库列 并且我想在单击后更改按钮 如何在不刷新页面的情况下实现这一目标 下面是我的代码 只有当我刷新页面时它才能正常工作
  • django-ckeditor 上传的图像的绝对路径

    我在用django rest framework和这个结合django ckeditor 我正在提供一些带有绝对 url s 的图像 没有任何问题 但是ckeditor上传的图片和文件是相对路径 由于位于不同的域中 因此无法在客户端显示 这
  • 仅调用一次/在 AngularJS 服务中缓存来自 $http get 的数据

    这可能听起来像一个非常简单 愚蠢的问题 但我需要问它 因为我之前没有遇到过这种情况 好吧 我的 angularJS 应用程序中有一项服务 该服务当前包含 4 个方法 它们都执行 80 相同的功能 代码 我希望提高效率 这是我的服务的样子 删
  • Yii 验证场景是否可以在 enableClientValidation 设置为 true 的情况下工作?

    这里使用 Yii 1 1 8 有谁知道 Yii 验证场景是否适用于客户端 Yii 验证 enableClientValidation gt true Yii 将使用您构建表单时设置的场景 因此 无论表单初始化时的情况如何 ActiveFor
  • 更改材质表反应中“操作”的样式

    我一直在我的一个项目中使用材料表 虽然我可以更改用户定义列的样式 字体大小 颜色 但我无法对 操作 列执行此操作 我对更改字体大小特别感兴趣 与分页相同的问题 我需要更改其字体大小 但似乎没有可用的选项 请举一个例子 https mater
  • 创建新文件夹的“Shell 命名空间”方式是什么?

    显然 这对于 win32 api CreateDirectory 来说是微不足道的 但我正在尝试托管一个 IShellView 并且希望以最面向 shell 的方式来做到这一点 我本以为 IShellFolder 中会有一个 createo
  • 如何解决昂贵的定制挂钩?

    众所周知 规则是 仅在顶层调用挂钩 不要在循环 条件或嵌套函数内调用 Hook 所以我的问题是如何使用和设计一个昂贵的定制挂钩 鉴于这个钩子 const useExpensiveHook gt some code that uses oth
  • 指示 GDB 6.5 使用目标文件中嵌入的源代码

    我一直在努力让GNU gdb 6 5 14在调试时使用嵌入在目标文件中的源代码 而不是扫描某些目录 主要原因是我是为嵌入式平台开发的 并且是交叉编译的 这意味着所有源代码都在我的电脑中 我读到了关于 ggdb3标志 其中包含许多额外信息 包
  • 在 Firefox 中访问第三方 cookie

    我们正在工作中使用 iframe 方法构建 Facebook 应用程序 为了使应用程序正常工作 需要在 iframe 内设置 cookie Safari 默认禁用第三方 cookie 因此我们目前将整个浏览器重定向到我们的服务器 设置跟踪会
  • 使用 Django Rest Framework Serializers 时转换数据的推荐方法

    使用 Django Rest Framework 序列化程序时 推荐的数据转换方式是什么 例如 input companyName Acme inc id 2 parent id 1 期望的输出 name Acme inc id 2 par
  • react-native:“adb”未被识别为内部或外部命令、可操作程序或批处理文件

    我是反应原生 Android 应用程序开发的新手 请帮我解决这个问题 我无法运行我的第一个应用程序 收到错误如下adb is not recognized as an internal or external command operabl
  • R hdf5数据集写错了?

    当我执行以下命令时 我的 预测器 数据集已正确填充 library rhdf5 library forecast library sltl library tseries fid lt H5Fcreate output file TODO
  • 将日期从“2009-12 Dec”格式转换为“31-DEC-2009”

    2009 12 Dec should be converted to 31 DEC 2009 2010 09 Sep should be converted to 30 SEP 2010 2010 02 Feb should be conv
  • 如何在Linux上正确设置串行通信

    我正在尝试从 FPGA 板读取数据以及向 FPGA 板写入数据 该板本身附带一个驱动程序 每当板插入时 该驱动程序都会创建一个名为 ttyUSB0 的终端设备 在 FPGA 上 实现了异步接收器和发送器 并且它们似乎可以工作 然而 C 方面
  • 在 BigQuery 视图定义中使用变量

    我有一个成功运行的简单查询 但是当我在查询中引入变量时 我无法使用该查询保存视图 例如 SELECT FROM mytable WHERE color red 该查询运行良好 然后 DECLARE color STRING DEFAULT
  • CSS - 相对定位的父div不拉伸到绝对子div高度

    我整个早上都在谷歌上搜索这个 但似乎无法让它发挥作用 我有一个具有相对定位的父 DIV 和一个位于其中的两列子 DIV 设置 两者都定位为绝对 我需要父 DIV 的高度与内部 DIV 的内容一起拉伸 我尝试在 content 的结束标记之前