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

最近在工作中碰到一个需求:

有左右2个并列的div,2个div都不能限定高度。左div为导航,右div为内容。如何能让左div块自动获得和右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();
}
时间: 2024-10-10 15:25:43

如何让2个并列的div根据内容自动保持同等高度的相关文章

让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

DIV的内容自动换行

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了. 2,word-wrap:break

div长度过小自动添加下拉

<div style="height: 600px;overflow-y: auto;"> <table width="100%" border="0"> <tr> <td width="15%" valign="top"> <UC:TreeView ID="MyTreeView" Target="frmMain"

div没有内容的时候依然保持占位,不会被覆盖

div分为左中右浮动,当左边没有内容,只有宽度高度自适应的情况下,左边的位置就会被中间的内容占据,如下图: 为了让空的div也占位,可以添加一个最小的高度min-height 1px即可,也可以设置border:true;这样就可以保证div一直占位 原文地址:https://www.cnblogs.com/my466879168/p/12258357.html

如何让两个 并列的div高度相等

哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){ $("right").style.height=$("left&quo

获取DIV内部内容报错

1.错误描述 2.错误原因 由于向div中添加元素,利用append(); $("#divStyle").append("<div><label>_data[i].name</label></div>"); append里面是动态数据,当请求数据为空时,获取并判断div中的内容: var divContent = $("#divStyle").html(); if(divContent == nul

Overflow属性——定义元素(如Div)内容区溢出情况

说明:overflow属性规定当内容溢出元素框时发生的事情. 注释:属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有可能即使元素框中可以放下所有内容也会出现滚动条.默认值是 visible. 可用的值: visible:默认值.内容不会被修剪,会呈现在元素框之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. auto:如果内容被修剪,则浏览器会显示

设置DIV根据内容自动调整高度的三个方法

Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid="content"></div></div> 当Content内容很多时,即使main设置了高度100%或auto.在除IE外的其他浏览器中还是不能完好的自动伸展.也就是说,内容的高度容器main的高度还是没有自动撑开. 我们有三种方法可以解决这个问题. 一,增加一

html中子div用了浮动怎样让父div的大小自动撑开

浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动 (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素float:left:,这样设置的坏处是不能用margin:auto:实现居中 (4)设置父元素display:inline-block;,这样设置的坏处是不能用m