>  기사  >  웹 프론트엔드  >  关于两个div高度保持一致的(css+js)两种解决办法_html/css_WEB-ITnose

关于两个div高度保持一致的(css+js)两种解决办法_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:56:201350검색

最近修改以前写的一些代码,发现点问题。

比如2个div需要动态的保持一致的高度。

css的做法是: 精心开发5年的UI前端框架!

.代码  

  1.   
  2.           
  3.   
  4.           
  5.   
  6.           
  

 

 

 

如果实际的高度不大于10000px,那么这个是没有问题的,如果有一边的实际高度大于了10000px,则另外一边的高度只能被定义为10000px,不符合实际运用的需求。

 

经过测试,用js可以解决这个问题。

代码如下: 精心开发5年的UI前端框架!

.代码  

  1. var height = document.getElementById("left").offsetHeight > document.getElementById("right").offsetHeight ?   
  2.     document.getElementById("left").offsetHeight : document.getElementById("right").offsetHeight;  
  3.           
  4.           
  5. document.getElementById("left").style.height = document.getElementById("right").style.height = height + "px";  

 

 

 

另外,在实际运用,可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如,最终赋值时发现left比right还高10px,这种情况只有手动在代码里面减10来解决了。这也是不太完美的地方。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:css模拟实现selec下拉框_html/css_WEB-ITnose다음 기사:弹出层 div dialog_html/css_WEB-ITnose

관련 기사

더보기