如何使一个div与一个div具有相同的高度
[英]How to make a div to have same height to one div
问题描述
I want to push height of a div to equal to other div.
我想将一个 div 的高度推到等于其他 div 的高度。 In my case, I have 2 div: div one and div two.就我而言，我有 2 个 div：div 1 和 div 2。 I need to push height of div two to equal div one.我需要将 div 2 的高度推到等于 div 1 的高度。 No matter content on div two, the height will equal to div one.无论 div 2 上的内容如何，高度都将等于 div 1。 If content on div two longer than content on div one, it will overflow the div two.如果 div 2 上的内容比 div 1 上的内容长，它将溢出 div 2。 Like the described bellow:就像下面描述的那样：
Is it possible to use jquery, CSS or combine of them?是否可以使用 jquery、CSS 或它们的组合？ 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.这里的大多数问题都在 2 div 之间相等，而不是等于 1 div。
Thank you for any kind of help.感谢您的任何帮助。
4 个解决方案
解决方案1
1 已采纳 2016-09-17 16:40:25
with only css只有 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或使用 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>
解决方案2
0 2016-09-17 16:38:35
Try,尝试，
window.onload=function()
{
$(div2 selector).css("height",$(div1 selector).css("height"));
}
解决方案3
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.使用纯 Javascript，您可以在 DIV#1 上使用element.getBoundingClientRect()方法来获取其实际高度值。 Then apply it to DIV#2 CSS style:然后将其应用于 DIV#2 CSS 样式：
var div1_height = document.querySelector("#div1").getBoundingClientRect().height;
document.querySelector("#div2").style.height = div1_height+"px";
解决方案4
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.找到你的 div 应该是的 div 的 id 并将你的 div 的高度设置为它。
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 :例如，类 div1 是尺寸较小的 div，类 div2 是您需要将其大小更改为 div1 大小的 div，请执行以下操作：
$('.div2').attr('height',$('.div1').attr('height'));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
无论屏幕宽度如何，如何使第二个 div 与第一个 div 具有相同的高度？ - How do I make the second div have the same height as first div, irrespective of the screen-width?
如何使次要div始终具有与第一个div相同的高度？ - How to get a secondary div to always have the same height as the first div?
使ap与放置在另一个div中的图像具有相同的宽度/高度 - Make a p have the same width/height as an image that is placed in another div
任何人都知道如何使用jquery在同一行中使div高度相等 - any one knows how to make equal div height in same row using jquery
如何确保两个div在jQuery Mobile中始终具有相同的高度 - How to ensure that two div always have same height in jQuery Mobile
使用js将一个div的高度设置为与另一个div相同的高度 - Using js to set height of one div to the same height as another div
使用简单的jQuery脚本获取一个div高度并使另一个div大小相同的问题 - Issues using a simple jQuery script to grab one div height & make another div the same size
如何让两个 div 屏幕显示和隐藏在相同的高度 - How to make two div screens show and hide at the same exact height
使Twitter小部件的高度与DIV相同 - Make twitter widget same height as DIV
Javascript：使两个div高度相同 - Javascript: make two div same height
相关标签