stackoom
  简体   繁体   中英

How to make a div to have same height to one div

 原文  2016-09-17 16:33:14  9   4    javascript/ jquery/ html/ css

Question

I want to push height of a div to equal to other div. In my case, I have 2 div: div one and div two. I need to push height of div two to equal div one. No matter content on div two, the height will equal to div one. If content on div two longer than content on div one, it will overflow the div two. Like the described bellow:

在此处输入图片说明

Is it possible to use jquery, CSS or combine of them? I am trying some answer from other question here, but most different case. Most of question here about equal between 2 div, not equal to one div.

Thank you for any kind of help.

4 answers

solution1
 1 ACCPTED  2016-09-17 16:40:25

with only css 

 <html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> .mydiv { width: 200px; height: 300px; overflow: scroll; border:2px solid black; text-align: center; position: absolute; } #one{ left: 10px; } #two{ left:220px; } </style> <body> <div class="mydiv" id="one">kjfkdfjdkfjkfjdkfjk jfkdjfdkfj kdfj kjfkfj kdjfkdfjdkfjdkfjdkfjdkfjkdfjdkfjdkfja ldjfdk jdkf jdkfjdk jfkdjfdk jkdjfkdjfkdjfkdjfkdfjdkfj kdjkdjfkdjfkdfjdkfjdkfjdkfjdkfjkdfjk </div> <div class="mydiv" id="two"> kdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfj </div> <script type="text/javascript"> </script> </body> </html>

or using jquery 

 <html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> .mydiv{ overflow: scroll; border:2px solid black; text-align: center; position: absolute; } #one{ width: 200px; height: 300px; } #two{ left:220px; } </style> <body> <div class="mydiv" id="one">kjfkdfjdkfjkfjdkfjk jfkdjfdkfj kdfj kjfkfj kdjfkdfjdkfjdkfjdkfjdkfjkdfjdkfjdkfja ldjfdk jdkf jdkfjdk jfkdjfdk jkdjfkdjfkdjfkdjfkdfjdkfj kdjkdjfkdjfkdfjdkfjdkfjdkfjdkfjkdfjk </div> <div class="mydiv" id="two"> kdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfjkdlfjdlfa;fj jfaljfkdlfjd jjf ljfal jljfafj dj djajfafajfdljadflkdjfldfjlfjdfjdkfjdslfjdlkfjdfkdjfdkfjdkfjdkfjdkfjdkfjdkjfkdjfkjfkjfkdjfkdfjkfjdkjfkdjfkdfj </div> <script type="text/javascript"> var div_one_width = $("#one").width(); //get the first div width var div_one_height = $("#one").height(); // get the second div height. $("#two").css({"width":div_one_width+'px',"height":div_one_height+'px'}) </script> </body> </html>

solution2
 0  2016-09-17 16:38:35

Try,

 window.onload=function()
 {
          $(div2 selector).css("height",$(div1 selector).css("height"));
  }

solution3
 0  2016-09-17 16:40:58

With pure Javascript, you can use the element.getBoundingClientRect() method on your DIV#1 to get its real height value. Then apply it to DIV#2 CSS style:

var div1_height = document.querySelector("#div1").getBoundingClientRect().height;
document.querySelector("#div2").style.height = div1_height+"px";

solution4
 0  2016-09-17 17:12:35

Find the id of the div to which your div should be and set the height of your div to it.

Eg class div1 is the div with smaller size & Class div2 is the div whose size you need to change to div1 's size do this :

$('.div2').attr('height',$('.div1').attr('height'));

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I make the second div have the same height as first div, irrespective of the screen-width? How to get a secondary div to always have the same height as the first div? Make a p have the same width/height as an image that is placed in another div any one knows how to make equal div height in same row using jquery How to ensure that two div always have same height in jQuery Mobile Using js to set height of one div to the same height as another div Issues using a simple jQuery script to grab one div height & make another div the same size How to make two div screens show and hide at the same exact height Make twitter widget same height as DIV Javascript: make two div same height
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM