{"id":6,"date":"2013-04-05T12:23:41","date_gmt":"2013-04-05T10:23:41","guid":{"rendered":"http:\/\/46.19.90.165\/?p=6"},"modified":"2014-09-25T10:45:30","modified_gmt":"2014-09-25T08:45:30","slug":"jquery-plugin-zwei-divs-gleiche-hoehe","status":"publish","type":"post","link":"https:\/\/www.makes-it-work.de\/en\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/","title":{"rendered":"jQuery-Plugin: Zwei DIVs gleiche H\u00f6he"},"content":{"rendered":"<h3>Ausgangslage \u2014 DIV-Elmente mit unterschiedlicher H\u00f6he<\/h3>\n<p style=\"text-align: left;\">H\u00e4ufig liegen zwei (oder mehr) Elemente einer Webseite nebeneinander. Dabei kann es sich sowohl um Bilder als auch um jede andere Art von Boxen (z.B. DIV-Tags) handeln. H\u00e4ufig w\u00e4re es optisch angenehm, wenn diese Boxen die <strong>gleiche H\u00f6he<\/strong> h\u00e4tten, sodass sie nicht nur oben, sondern auch unten eine Linie bilden. Daf\u00fcr muss sich die kleinere Box \u2014 also die mit der geringeren H\u00f6he \u2014 an die gr\u00f6\u00dfere Box anpassen. Eine manuelle H\u00f6henangabe scheidet dabei selbstverst\u00e4ndlich aus, denn der Inhalt einer solchen Box ist in der Regel dynamisch generiert oder zumindest \u00e4nderbar.<\/p>\n<p style=\"text-align: left;\"><!--more--><\/p>\n<h3>L\u00f6sungsideen<\/h3>\n<p>F\u00fcr das Problem gibt es verschiedene L\u00f6sungsans\u00e4tze. <a title=\"Boxen gleicher H\u00f6he mit CSS\" href=\"http:\/\/matthewjamestaylor.com\/blog\/equal-height-columns-cross-browser-css-no-hacks\">Ein Ansatz<\/a> ben\u00f6tigt lediglich <strong>CSS<\/strong>-Regeln, erfordert daf\u00fcr aber auch Anpassungen am bestehenden HTML-Quelltext, die nicht dem Inhalt, sondern einzig und allein der Probleml\u00f6sung dienen. Bei unseren Webprojekten versuchen wir den HTML-Code so sauber wie m\u00f6glich zu halten.<\/p>\n<p>Solange nur wenige Browser bei der <strong><a title=\"Einf\u00fchrung in das Flexbox-Modul\" href=\"http:\/\/webkrauts.de\/artikel\/2012\/css3-flexbox-abloesung-fuer-float-layouts\">Flexbox<\/a><\/strong>&#8211;<a title=\"Flexbox bei Mozilla\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/Tutorials\/Using_CSS_flexible_boxes\">Implementierung<\/a> auf einem aktuellen Stand sind, scheidet f\u00fcr uns auch die Umsetzung einer L\u00f6sung auf der Basis von modernem CSS3 vorerst aus. Da auf vielen Seiten unserer Kunden ohnehin JavaScript f\u00fcr Webshop-Anwendungen vorausgesetzt wird, ist eine L\u00f6sung auf Basis von <a title=\"jQuery-Homepage\" href=\"http:\/\/www.jquery.com\">jQuery<\/a> f\u00fcr uns reizvoll.<\/p>\n<h3>jQuery-Plugin<\/h3>\n<p>Wir haben die relativ einfache Funktion in ein <strong>jQuery-Plugin<\/strong> verpackt, sodass die Aufrufe im jQuery-Stil erfolgen k\u00f6nnen und die typische Chainability erhalten bleibt. Dabei ist die Umsetzung eines solchen Plugins erfreulich einfach und mit der <a title=\"Anleitung zur Erstellung von jQuery-Plugins\" href=\"http:\/\/docs.jquery.com\/Plugins\/Authoring\">Anleitung der jQuery-Entwickler<\/a> schnell vollzogen.<\/p>\n<p>Unser kleines Plugin sieht wie folgt aus:<\/p>\n<pre lang=\"javascript\" escaped=\"true\">\/**\r\nCopyright (c) 2013 actiview GmbH\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and\/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\r\n*\/\r\n(function($){\r\n  $.fn.equalHeight = function() {\r\n    var max = 0;\r\n    this.each(function() {\r\n      max = Math.max(max, $(this).height());\r\n    });\r\n    this.each(function() {\r\n      $(this).height(max);\r\n    });\r\n    return this;\r\n  };\r\n})(jQuery);<\/pre>\n<h3><code><\/code>Verwendung<\/h3>\n<p>Kopieren Sie den Code in eine beliebige JavaScript-Datei, die nach jQuery geladen wird. Rufen Sie das Plugin dann innerhalb der <a title=\"Dokumentation bei jQuery\" href=\"http:\/\/api.jquery.com\/ready\/\">document.ready-Funktion<\/a> auf:<\/p>\n<pre lang=\"javascript\" escaped=\"true\">$(document).ready(function() {\r\n\r\n    $('#content .box').equalHeight();\r\n\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Ausgangslage \u2014 DIV-Elmente mit unterschiedlicher H\u00f6he H\u00e4ufig liegen zwei (oder mehr) Elemente einer Webseite nebeneinander. Dabei kann es sich sowohl um Bilder als auch um jede andere Art von Boxen (z.B. DIV-Tags) handeln. H\u00e4ufig w\u00e4re es optisch angenehm, wenn diese Boxen die gleiche H\u00f6he h\u00e4tten, sodass sie nicht nur oben, sondern auch unten eine Linie&hellip;&nbsp;<a href=\"https:\/\/www.makes-it-work.de\/en\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">jQuery-Plugin: Zwei DIVs gleiche H\u00f6he<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","_links_to":"","_links_to_target":""},"categories":[95,94],"tags":[7,8],"translation":{"provider":"WPGlobus","version":"2.12.0","language":"en","enabled_languages":["de","en"],"languages":{"de":{"title":true,"content":true,"excerpt":false},"en":{"title":false,"content":false,"excerpt":false}}},"jetpack_featured_media_url":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery-Plugin: Zwei DIVs gleiche H\u00f6he - Makes IT work - der Blog von OMG.de<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery-Plugin: Zwei DIVs gleiche H\u00f6he - Makes IT work - der Blog von OMG.de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/\" \/>\n<meta property=\"og:site_name\" content=\"Makes IT work - der Blog von OMG.de\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-05T10:23:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-09-25T08:45:30+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@omgde\" \/>\n<meta name=\"twitter:site\" content=\"@omgde\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#organization\",\"name\":\"OMG.de\",\"url\":\"https:\/\/www.makes-it-work.de\/en\/\",\"sameAs\":[\"https:\/\/twitter.com\/omgde\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.makes-it-work.de\/wp-content\/uploads\/2021\/11\/Logo_OMG_PNG-Kopie.png\",\"width\":358,\"height\":356,\"caption\":\"OMG.de\"},\"image\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#website\",\"url\":\"https:\/\/www.makes-it-work.de\/en\/\",\"name\":\"Makes IT work - der Blog von OMG.de\",\"description\":\"Themen und News rundum IT und Technik. Von den Spezialisten der OMG.de GmbH.\",\"publisher\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.makes-it-work.de\/en\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/#webpage\",\"url\":\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/\",\"name\":\"jQuery-Plugin: Zwei DIVs gleiche H\\u00f6he - Makes IT work - der Blog von OMG.de\",\"isPartOf\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#website\"},\"datePublished\":\"2013-04-05T10:23:41+00:00\",\"dateModified\":\"2014-09-25T08:45:30+00:00\",\"description\":\"Zwei Boxen mit einem einfachen jQuery-Plugin auf die gleiche H\\u00f6he bringen. Es k\\u00f6nnen auch andere Tags als Divs verwendet werden (zum Beispiel Bilder).\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#\/schema\/person\/59eb3f78485d68bbbf79e3928a1586ca\"},\"headline\":\"jQuery-Plugin: Zwei DIVs gleiche H\\u00f6he\",\"datePublished\":\"2013-04-05T10:23:41+00:00\",\"dateModified\":\"2014-09-25T08:45:30+00:00\",\"commentCount\":0,\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#organization\"},\"keywords\":\"jQuery,Plugin\",\"articleSection\":\"Blog,Code\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.makes-it-work.de\/2013\/04\/05\/jquery-plugin-zwei-divs-gleiche-hoehe\/#respond\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#\/schema\/person\/59eb3f78485d68bbbf79e3928a1586ca\",\"name\":\"Johannes Mitlmeier\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.makes-it-work.de\/en\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/af5e7a1248b437d35c3569c860cb7269?s=96&d=mm&r=g\",\"caption\":\"Johannes Mitlmeier\"},\"description\":\"Als Webentwickler ist es meine Aufgabe die verf\\u00fcgbaren Techniken so zu verbinden, dass dabei gut bedienbare Produkte entstehen, die die Aufgabe l\\u00f6sen, die der Kunde an uns herangetragen hat.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts\/6"}],"collection":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":8,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts\/6\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/posts\/6\/revisions\/96"}],"wp:attachment":[{"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/media?parent=6"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/categories?post=6"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makes-it-work.de\/en\/wp-json\/wp\/v2\/tags?post=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}