将响应式 div 高度设置为等于其同级 div 高度

2024-01-09

我有两个 div,其宽度由百分比控制。我希望右侧 div 与左侧 div 一样高,左侧 div 根据其包含的图像的宽度和浏览器窗口的宽度进行扩展和收缩。

有没有一种方法可以在不使用 JavaScript 的情况下完成此任务?

http://jsfiddle.net/5JU2t/ http://jsfiddle.net/5JU2t/


实现这一目标的最简单方法是使.rightdiv 绝对定位和设置top and bottom to 0.

只需记住定位父级(.main) div 相对并删除所有浮动:

.right {
    bottom:0;
    position: absolute;
    right:0; 
    top: 0;
}

.main {
    position: relative;
}

工作示例:http://jsfiddle.net/5JU2t/1/ http://jsfiddle.net/5JU2t/1/

Note

示例中右列稍长的原因是由于图像下方添加了空白区域。如果您仅使用此列中的图像,那么您可以添加float: left到图像来解决这个问题:

工作示例:http://jsfiddle.net/5JU2t/2/ http://jsfiddle.net/5JU2t/2/

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

将响应式 div 高度设置为等于其同级 div 高度 的相关文章

随机推荐

  • 联合内位域的对齐

    我对以下代码如何在内存中布局感到有点困惑 struct Thing union unsigned value 24 uint8 t bytes 3 Thing int v value v void foo printf Thing p va
  • WAMP 中不考虑更改 my.ini 文件上的 datadir

    我通常不会问这个问题 但我却用这个问题来撞墙 我正在尝试设置 WAMP 以与 Dropbox 配合使用 我已经使用过这两个教程 http mymediamagnet com how to setup wamp with dropbox ht
  • 云数据融合预览环境

    我们可以配置计算配置文件以在我创建的自定义集群上运行管道 但是对于预览 我无法指定计算配置文件 我需要使用一些自定义转换 这需要我在 data proc 集群上安装一些外部 jar 才能使代码正常工作 我想在使用 预览运行 部署代码之前对其
  • 使用驼峰路由提供静态文件

    我正在尝试在骆驼路线中提供静态文件 我的主类中的路由包含这段代码 public final void configure throws Exception declaring camel routes match on uri prefix
  • AJAX 提交之前的 jQuery 验证

    我有一个简单的注册表单 其中包含以下 jQuery 验证代码 document ready function registerForm validate rules Username required true minlength 6 Pa
  • Ember.js:查看监听按键事件

    在我的应用程序中 我有一个包含一些设置信息的面板 该面板通过单击按钮打开 关闭 但我也希望能够通过点击关闭它esc在键盘上 我的视图的代码如下所示 Social MainPanelView Ember View extend element
  • Android:保存试用申请信息

    我想保存一些有关试用版应用程序的信息 我希望此信息持久存在 以便检测用户是否删除了该应用程序并在试用期满后再次安装 存储此类信息的最佳位置是什么 thanks 大多数时候 这个问题的解决方案是进行服务器端检查 但如果您不想使用服务器 最好在
  • SQL - 删除电话号码中的括号

    我正在尝试从号码的区号中删除括号 我可以这样做 但是当我尝试连接两个 Replace 函数时 数字会重复 仅删除一个括号 这是我到目前为止所尝试的 SELECT HomePhone REPLACE HomePhone REPLACE Hom
  • Windows 和 Mono 上的 SQLite?

    读完问题后如何有条件地为 Mono 和 Microsoft NET 编译 C https stackoverflow com questions 329043 how can i conditionally compile my c sha
  • 将函数应用于 R 中的距离矩阵

    这个问题今天出现在 manipulatr 邮件列表中 http groups google com group manipulatr browse thread thread fbab76945f7cba3f 我正在改写 给定一个距离矩阵
  • 使用 setTimeout 提高响应能力

    当寻求提高页面性能时 我以前从未听说过的一项技术是使用 setTimeout 来防止 javascript 阻碍页面的呈现 例如 假设我们有一段特别耗时的 jQuery 内嵌在 html 中 input click function Do
  • Grails spring 安全重定向到错误的端口

    在我的 Grails 应用程序 2 3 11 中 我的登录页面将 Ajax 请求发送到 https myurl my app j spring security check https myurl my app j spring secur
  • 如何将值数组传递给 SudzC 生成的 Web 服务类?

    我有一个从 WSDL 生成的 sudzc 服务类 它接受 ArrayOfInt 和 ArrayOfString 对象作为参数 服务方法签名是这样的 SoapRequest Search id
  • 简单的 DOM 和
  • 我尝试了几种不同的方法 但似乎没有任何效果 我尝试了所有示例如何用简单的 HTML DOM 来模拟子选择器 https stackoverflow com questions 6831597 how to imitate child sel
  • ORM 与 CodeContracts 结合使用的实体 - 确保不变性

    我目前正在将 CodeContracts 添加到我现有的代码库中 事实证明困难的一件事是使用由 NHibernate 水合的实体 假设这个简单的类 public class Post private Blog blog Obsolete R
  • 是否可以使用从 Docker 内部构建的内核模块?

    我有一个需要为特定硬件构建的自定义内核模块 我想自动设置我的系统 因此我一直在容器化多个应用程序 我需要的东西之一就是这个内核模块 假设 Docker 容器中的内核头文件和主机上的内核版本完全相同 是否可以将整个构建过程容器化并允许主机使用
  • WCF:更改 ClientCredentials 会产生“此工厂启用手动寻址,因此发送的所有消息都必须预先寻址”。

    任何人都可以帮忙 我正在尝试通过通道工厂调用休息服务 但发送我的凭据 休息服务使用 Windows 身份验证 但通过以下代码 我得到 该工厂启用了手动寻址 因此发送的所有消息都必须预先寻址 使用 GetMessage 时出错 我知道我的服务
  • 为什么 Maven + Spring Boot 会创建巨大的 jar 文件?

    我有以下 Maven 项目结构 parent project main application domain models and repository module 1 module 2 module 3 以及以下简化的 POMS 父项目
  • 在JS中获取当前IP(无第三方服务)[重复]

    这个问题在这里已经有答案了 是否可以使用 WebRTC JS API 和 ICE 协议 公共 IP 为 STUN 获取客户端 IP 是的 您可以 使用 WebRTC JS API 和 ICE 协议 公共 IP 为 STUN 更多信息here
  • 将响应式 div 高度设置为等于其同级 div 高度

    我有两个 div 其宽度由百分比控制 我希望右侧 div 与左侧 div 一样高 左侧 div 根据其包含的图像的宽度和浏览器窗口的宽度进行扩展和收缩 有没有一种方法可以在不使用 JavaScript 的情况下完成此任务 http jsfi