用JS实现2个DIV等高

最新推荐文章于 2021-06-22 04:53:07 发布
最新推荐文章于 2021-06-22 04:53:07 发布
阅读量982 收藏
点赞数
分类专栏： JS特效 文章标签： div xhtml html border

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>插件之家</title>
<style type="text/css">
body{margin:0px;padding:0px;color:black;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height: 140%;}
div{margin:0px;padding:0px;border:0px;}
#main{width:780px;margin:0 auto;overflow:hidden;background:#CCC;}
#left{width:400px;float:left;background:#FF9966;border:1px solid #f00;}
#right{width:350px;float:right;background:#6699CC;border:1px solid #f00;}
</style>
</head>
<body>
<div id="main">
<div id="left">left<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br /></div>
<div id="right">right<br />右边DIV的高度也被撑高了吧~</div>
</div>
<script type="text/javascript">
document.getElementById("right").style.height=document.getElementById("main").scrollHeight+"px";
document.getElementById("left").style.height=document.getElementById("main").scrollHeight-2+"px";
</script>
<br />代码整理：<a href="http://www.chajian100.com/" _fcksavedurl="http://www.chajian100.com/" target="_blank">插件之家</a>　＊尊重他人劳动成果，转载请自觉注明出处！ </p>
</body>
</html>

cf_nick
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JS实现2个DIV等高特效代码
03-20
在网页设计中，让两个或多个`div`元素保持等高的效果是一种常见的需求，它可以确保内容区域在不同屏幕尺寸下视觉上保持一致。本篇文章将详细介绍如何使用JavaScript来实现这样的等高特效，以及相关的编程知识。 ...
利用javascript脚本编程使元素与容器元素等高
dieya9669的博客
10-04 103
问题： 父元素(Col)内有两个兄弟元素，分别命名为Col1和Col2 Col1或Col2中内容由服务端代码生成，高度不用CSS设定。如何做到使兄弟元素的高度为最多的那个元素的高度？ Javascript代码如下： 1functionresizeHeight(){ 2if(!document.getElementsByTagName)returnfalse;...
获取div的高度
weixin_34195142的博客
10-11 7622
1、获取div的文档总高度（必须DOM操作）： var scrollHeight=document.getElementById("inner").scrollHeight; // jq中没有scrollHeight -只有scrollTop():// 所以用DOM操作获取元素并计算scrollHeight。12342、获取div的窗口显示高度： var height=$("#inner")...
html 给div设置高度,div高度设置 DIV 高度篇
weixin_39723102的博客
06-22 3927
DIV 高度教程-DIV的高度设置篇如何对div设置高度呢？答案很简单 使用css height样式即可设置div高度。div的高度图我们要对div对象设置高度样式，一般分为设置固定高度，最小高度、最大高度、自适应高度。假如一个DIV对象的class css命名“.div-height”，为了观察到效果，我们对div盒子加css边框样式，设置div宽度 width为300px。一、设置固定高度 ...
div 左右排列 高度自适应_探讨div中的高度与宽度
weixin_39668479的博客
11-29 280
在学习css的过程中，总会遇到各式各样的超自然现象无法解释，当中有不少疑惑，决定用这篇文章来一探究竟。本文重点用常见例子的方式来探讨已知div的高度和宽度时的实际应用。Previously，请记住一点：写css请用border调试写css请用border调试写css请用border调试1.包裹文字时的div高度从上面是div的高度不是20px，说明跟font-size属性无关，只是由line-he...
网页前端div的高度设置
反手一个bug的博客
11-18 4431
首先我们要区分关于CSS里height的一个误区，width：100%是保持和父块宽度一样，但是有的时候我们设置height:100%会无效，为什么呢 因为我们在div设计时会控制width，但是一般不会去设置height，除非你想要一个绝对布局另当别论，不然我们都会让里面的内容去自适应它的height，这就是height：100%无效的原因，你不能对一个自适应高度的父类去保持和它一样的高度，父类...
用JS实现2个DIV等高.rar
07-05
在网页设计中，让两个或多个...总之，通过JavaScript实现两个div等高是一种常见且实用的技术，它能够帮助我们在各种屏幕尺寸和内容变化下保持良好的页面布局。结合适当的HTML和CSS，我们可以创建出响应式且美观的网页。
两个DIV等高的JS的实现代码
12-10
这个场景下，我们看到的代码是使用JavaScript来实现两个`div`元素等高的一个简单示例。这个例子主要涉及到以下几点关键知识点： 1. **DOM操作**：JavaScript通过Document Object Model (DOM)来与HTML页面进行交互。...
用div实现像table一样的布局方法
10-30
在网页设计中，有时我们需要创建一个布局，使得多个div元素能像表格（table）一样排列，保持等高并可以灵活地调整内容对齐方式。在HTML中，`<table>`元素是最直接的实现方式，但因为表格布局在某些场景下可能会导致...
【CSS系列】height:100%设置div的高度
hellojoy的博客
04-10 4296
https://www.cnblogs.com/dream-to-pku/p/7372384.html 一、div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式，是无法成功显示100%高度的。这个是因为body高度默认值为自适应的，所以及时设置body第一个布局div高度为百分比也是无效的，因为div解析上级高度为0，自然div heig...
里面的div怎么撑开外面的div让高度自适应
09-22
希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应，下面有个示例大家可以参考下
DIV默认高度且自适应高度
yangxianli的专栏
08-24 1万+
转： 本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题，如果我们需要设置一个div高度，当里面的东西超过这个高度时，让这个容器自动被撑开，也就是DIV自适应高度。当里面的信息很少时候，我们就设置它一个最小的固定高度。 如何控制DIV最小高度又DIV
js实现高度自适应的两个div高度相等
Tom_chao的博客
02-18 1647
这里有两个高度自适应的div： 点击按钮之后效果如下： CSS代码： .left{ width:100px; padding:10px; float:left; background:red; border:1px solid #ccc; } .right{ width:100px; padding:20px; float:left; backgrou
JS中控制两个div的高度保持一致
XuJiangDong
04-01 4387
<script type="text/javascript"> $(function(){ if($("#left").height() > $("#right").height()){ $("#right").css("height",$("#left").height()); }else{ $("#left").css("height",$("#right").height()); } }) <
CSS实现div高度自适应
jshyzx1999的博客
04-17 1307
1、有时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。在一般情况下，使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7，opera，火狐，谷歌没有问题。所以采用以下写法可以解决兼容性： height:auto!important; height:200px; m...
html js div 内容高度,关于两个div高度保持一致的（css+js）两种解决办法_html/css_WEB-ITnose...
weixin_30865253的博客
06-17 730
最近修改以前写的一些代码，发现点问题。比如2个div需要动态的保持一致的高度。css的做法是： 精心开发5年的UI前端框架！.代码如果实际的高度不大于10000px，那么这个是没有问题的，如果有一边的实际高度大于了10000px，则另外一边的高度只能被定义为10000px，不符合实际运用的需求。经过测试，用js可以解决这个问题。代码如下： 精心开发5年的UI前端框架！.代码 var he...
左右两栏等高实现方法
chenxiong0715的博客
01-01 576
等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简单，但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度，然...
js实时获取并显示当前时间的方法
热门推荐
ak157888的博客
12-08 7万+
js部分如下： <script type="text/javascript"> window.onload = function() { var show = document.getElementById("show"); setInterval(function() { var time = new Date(); // 程序计时的月从0开始取值后+1 var m =
js　设置两个DIV高度相等
Java世界中的.Net笨鸟
06-26 282
document.getElementById("demo").style.height = document.getElementById("tabDIYDeatils").offsetHeight;
用js实现随机改变div的背景颜色
最新发布
05-10
<div id="myDiv">这是一个div</div> ``` ```javascript // 获取div元素 var div = document.getElementById("myDiv"); // 定义颜色数组 var colors = ["red", "blue", "green", "yellow", "orange", "purple"]; /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值