左右两个DIV等高的四种方法

最新推荐文章于 2021-06-10 01:41:16 发布
转载 最新推荐文章于 2021-06-10 01:41:16 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Aray/archive/2012/04/12/2444923.html

本文介绍了实现左右两个区域等高的四种方法：使用背景图营造视觉效果、利用表格特性、通过CSS特殊设置以及借助JavaScript动态调整高度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1：使用背景图

     就是两个DIV外面套一个DIV，然后repeat-y一个背景图，这种方法不是真的等高，只是只要有一个内容增多，背景图就会纵向重复，形成左右等高的效果。

2：使用表格

     用table，两个TD，一侧内容增加另一侧会自动拉长

3：使用CSS控制（个人感觉最好的方法）

     两个DIV都设{margin-bottom:-10000px; padding-bottom:10000px;}

4：使用JS控制

     取一个DIV的高度，然后if一个DIV1的高度大于DIV2，然后DIV1.offsetHeight=DIV2.offsetHeight在else{DIV1.offsetHeight=DIV2.offsetHeight}

转载于:https://www.cnblogs.com/Aray/archive/2012/04/12/2444923.html

RabinRow
关注
web前端入门到实战：css实现内容不相同的左右两个div等高
软件开发-前端开发-IT
09-15 387
问题提出 现在有两个div左右排列，但是两个div的内容不相同，如何设置两个div的css做到在两个div等高排列呢？下面是3种实现方法，觉得很有代表性，所以索性收藏起来。 方法一 通过父元素设置 overflow:hidden, div自己设置padding-bottom 和 margin-bottom来实现。 <div id="#warp"> <div> ...
DIV左右两边高度永远相等
06-15
如果左边的高度小于右边的高度，则左边自动增加高度。如果左边的高度大于右边的高度，则右边的高度自动增加
div两边等高
w_t_y_y的博客
01-13 4114
现有两个横向排列的div，希望两个div高度保持一致，有以下方法：
css实现左右两个div等高
weixin_30700977的博客
07-26 671
提出问题： 现在有两个div，但是两个div里面内容多少不确定，可能左边多，可能右边多，css要如何设置可以保证左右两边的div等高呢？ 解决方案： 每个div使用display:table-cell div的父元素使用display:box 示例代码1： <!DOCTYPE html> <html lang="en"> <head> <me...
多种方法实现div两列等高（收集整理）
weixin_33883178的博客
01-08 251
HTML骨架 &lt;div id="header"&gt;头部&lt;/div&gt; &lt;div id ="container"&gt; &lt;div class="mainbox"&gt;主内容区域&lt;/div&gt; &lt;div class="sidebox"&gt;侧边栏&amp
左右等高div
Zoe_Wang_ing的专栏
12-18 676
$(function(){ equalHeight($('.content_left'),$('.content_right')); }) function equalHeight(left,right){ var lh = left.height(); var rh = right.height(); if(lh<rh){ left.css("h
两个DIV等高的JS的实现代码
10-30
在本例中，我们探讨的是如何使用JavaScript实现两个div等高的效果。 首先，让我们解析提供的代码： ```javascript var mainCon = document.getElementById("sidebar-right").scrollHeight; var sidebar = ...
用JS实现2个DIV等高.rar
07-05
在网页设计中，让两个或多个...总之，通过JavaScript实现两个div等高是一种常见且实用的技术，它能够帮助我们在各种屏幕尺寸和内容变化下保持良好的页面布局。结合适当的HTML和CSS，我们可以创建出响应式且美观的网页。
HTML如何在两个div标签中间画一条竖线
09-28
在这个JavaScript版本中，我们通过`getElementById`获取两个div，然后比较它们的高度。根据结果，我们将较高div的右侧边框（或左侧边框）设置为可见，从而创建竖线效果。 总的来说，无论使用纯CSS还是JavaScript，...
用JS实现2个DIV等高特效代码
03-20
在网页设计中，让两个或多个`div`元素保持等高的效果是一种常见的需求，它可以确保内容区域在不同屏幕尺寸下视觉上保持一致。本篇文章将详细介绍如何使用JavaScript来实现这样的等高特效，以及相关的编程知识。 ...
（转）Div左右两侧等高
weixin_34216107的博客
07-10 331
一.利用背景图，做出左右等高的模拟效果 这种方法不是真正的左右等高，而是在外框元素中添加一张背景图片，当内容增多时，背景会纵向重复，就会形成左右等高的效果。 这种方法不是真正的div自动等高，而是在左右两个div的外面添加一个外框元素，给这个外框元素添加一个背景，当内容增多时，背景就会向下纵向重复，看起来就向左右两个div都自动向下延伸了一样。下面写一下详细代码。 Html代码...
div多列等高处理，实现多个div等高
07-20
div多列等高，实现多个div等高，同一水平的div框
css实现两个div并排等高
热门推荐
笔心
04-03 3万+
方法一 table-cell 代码 运行结果 方法二 css3盒模型 代码 运行结果方法一 table-cell代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .left, .right { padding: 1
设置两个div等高、文字居中
Wang_Si_D的博客
08-16 368
div等高： 方法1：给父元素样式添加：display: -webkit-box; 方法2：给div添加：display: table-cell; 文字居中： .div{ background-color: red; height: 100px; width: 60px; text-align:center; /* 水平居中 */ line-height: 100px; /* 垂...
让两列Div一样高（自适应高度）
twosecond
06-23 2661
正 文：    由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。    div css基本布局：    1、js实现div自适应高度代码如下
div+css实现的左右两个等高div
weixin_30435261的博客
02-22 423
工作当中我们经常会有这样的需求，尤其是在一些内容页面或者网站后台管理页面：左边的div的高度会随着右边的div的内容的增加儿增加，右边div的高度也会随着左边div的内容的增加而增加，也就是左右两侧两个等高的div。如果不借助JS，而是单纯的使用div+css的方法该怎么实现呢？见代码： <!doctype html> <html> <head&g...
html 左右div同高,css 左右DIV等高
weixin_31966453的博客
06-10 324
文章参考http://blog.youkuaiyun.com/wodetiankong516/article/details/12010121http://dreamweaver.abang.com/od/divcss/a/div-denggao0.htm.wrap{overflow: hidden;}.left{width: 200px;margin-bottom:-10000px;padding-bott...
实现两个div自适应等高的两种方式
jinbiao8246的博客
05-20 909
1.利用padding 话不多说，直接上代码： .box{ overflow: hidden; } .left{ background-color: green; float: left; width: 20%; margin-bottom: -9999px; padding-bottom: 9999px; } .right{ background-color: hotpink;
并列div 等高（任何一个变高，其余随之变高）
撸码方为上策
03-17 740
直接上html .wrap{ border: 2px solid red; width: 300px; display: table; } .wrap .child{
实现多列div等高的方法技巧
在Web前端开发中，实现多个div元素等高是一个常见的需求。当设计师设计了多列等高布局的页面时，开发者需要通过CSS或JavaScript等技术手段来确保这些div在视觉上保持一致的高度，无论它们的内容多少。这个问题看似...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值