Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var biggestHeight = 0;
- // Loop through elements children to find & set the biggest height
- $(".container *").each(function(){
- // If this elements height is bigger than the biggestHeight
- if ($(this).height() > biggestHeight ) {
- // Set the biggestHeight to this Height
- biggestHeight = $(this).height();
- }
- });
- // Set the container height
- $(".container").height(biggestHeight);
- <div class="autoheight" style="background: blue">
- <div style="position: absolute; width: 33.3%; background: red">
- Only
- <div style="background: green">
- First level elements are measured as expected
- </div>
- </div>
- <div style="float:left; width: 33.3%; background: red">
- One Two Three Four Five Six Seven Eight Night Ten
- </div>
- <div style="float:left; width: 33.3%; background: red">
- One Two Three Four Five Six
- </div>
- </div>
- <script>
- function processAutoheight()
- {
- var maxHeight = 0;
- // This will check first level children ONLY as intended.
- $(".autoheight > *").each(function(){
- height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total
- if (height > maxHeight ) {
- maxHeight = height;
- }
- });
- $(".autoheight").height(maxHeight);
- }
- // Recalculate under any condition that the viewport dimension has changed
- $(document).ready(function() {
- $(window).resize(function() { processAutoheight(); });
- // BOTH were required to work on any device "document" and "window".
- // I don't know if newer jQuery versions fixed this issue for any device.
- $(document).resize(function() { processAutoheight(); });
- // First processing when document is ready
- processAutoheight();
- });
- </script>
- /**
- * Sets the height of a container to its maximum height of its children. This
- * method is required in case
- *
- * @param selector jQuery selector
- */
- function setHeightByChildrenHeight(selector)
- {
- $(selector).each(function()
- {
- var height = 0;
- $(this).children("*").each(function()
- {
- height = Math.max(height, $(this).height());
- });
- $(this).height(height);
- });
- };
- <div class="container">
- <div class="faq-cards">
- <div class="faq-cards__card">Im A Card</div>
- <div class="faq-cards__card">Im A Card</div>
- <div class="faq-cards__card">Im A Card</div>
- <div class="faq-cards__card">Im A Card</div>
- <div class="faq-cards__card">Im A Card</div>
- <div class="faq-cards__card">Im A Card</div>
- <div class="faq-cards__card">Im A Card</div>
- </div>
- </div>
- .container {
- height:auto;
- width: 1280px;
- margin:auto;
- background: #CCC;
- }
- .faq-cards {
- display:flex;
- flex-wrap:wrap;
- justify-content: center;
- position:relative;
- bottom:40px;
- height:auto;
- }
- .faq-cards__card {
- margin:10px;
- position:relative;
- width:225px;
- background: beige;
- height: 100px;
- padding:10px;
- text-align: center;
- }
- $(".container").height($(document).height());
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement