让2个并列的div根据内容自动保持同等高度js

有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？

同时，也有网友提问到“如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。

的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个div高度始终保持一致。

function $(id){ return document.getElementById(id)
}
function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){$("right").style.height=$("left").offsetHeight + "px";}else{$("left").style.height=$("right").offsetHeight + "px";}
}
window.onload = function() {getHeight();
}

经测试，该代码有效。

另外，在实际运用，可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如，最终赋值时发现left比right还高10px，那么也可以通过修改上述代码解决：

$("left").style.height=$("right").offsetHeight-10 + "px";

http://blog.163.com/sharesun@126/blog/static/5749096200931121250435/ 让并排的两个Div自适应高度（一样高）

转载于:https://www.cnblogs.com/aure/p/4345383.html

让2个并列的div根据内容自动保持同等高度js相关推荐

html两个字段自动相加,HTML_两个并列的div让其根据内容自动保持同等高度，我们看下下面这个问题：有左 - phpStudy...
两个并列的div让其根据内容自动保持同等高度我们看下下面这个问题:有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? ...
固定高度div,随内容自动变高css定义方法
*{ font-size:12px; margin:0; padding:0;} 方法1: #testBox{border:1px solid #cccccc;padding:5px;width:22 ...
div 中的控件底部对齐_如何将div的内容与底部对齐？
如何将div的内容与底部对齐? 假设我有以下CSS和HTML代码: #header { height: 150px; } Header title Header content (one or mul ...
html图片超出内容隐藏,图片按比例缩小，溢出超出DIV边框的内容自动隐藏方法！...
这几天在学习百度搜索结果出现缩略图的方法,百度PC的缩略图比例:121:75,我的文章列表页的比例为121:54,比例相差太大,所以最近的文章缩略图基本没有. 而如果将列表图片改为121:75比例后, ...
让DIV内部内容撑开外层的div方法
1.今天遇到一个DIV设置的问题,因为外层的DIV(a)没有设置高度,想弄成自适应的,在外层DIV的下面添加的其他DIV(b)节点会因为DIV(a)没有设置高度而浮到上面去,跟DIV(a)的内容重叠在 ...
jquery js 设置 div 的内容，给 div 添加一个属性
设置 div 的内容的写法: jquery 的写法: $( "#div1" ).html( "aa" ); // 将 div1 元素里面的 html ...
div中内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示 ...
div 随着内容撑开
当内容不定高时,可以使用以下几种方式让 div 随着内容撑开: 使用 display: flex 将父元素设置为 display: flex,并使用 flex-direction: column 让子 ...
html出现滚动条挤内容,html – 如何防止webkit滚动条推挤div的内容？
我正在使用webkit滚动条,并且正在运行到造型问题,因为Webkit滚动条将左侧的div的内容推送到内容溢出. 注意 >第一盒使用默认浏览器滚动条,不溢出(不错) >第二盒使用webki ...

让2个并列的div根据内容自动保持同等高度js

让2个并列的div根据内容自动保持同等高度js相关推荐

最新文章

热门文章