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

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

WBOY
WBOYOriginal
2016-06-24 11:56:201350Durchsuche

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

比如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来解决了。这也是不太完美的地方。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:css模拟实现selec下拉框_html/css_WEB-ITnoseNächster Artikel:弹出层 div dialog_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen