Sprawdzaj DIV wysokość i ustawienie div wysokość

Question

Jestem zupełnie nowy w JavaScript/jQuery rzeczy, ale chciałbym robić tego typu rzeczy z nim:

Mam cztery DIV side-by-side jak ta i zawartość w każdym z nich. Teraz, jeśli ktoś ma więcej treści, zostaje rozciągnięty wyżej. Chciałbym uczynić innych div tak samo wysoko, nawet jeśli nie mają tak dużej zawartości. Więc w zasadzie chcę, aby skrypt przechodził przez divy i sprawdzał wysokości i ustawiał wszystkie wysokości div tak jak najwyższy div. Mam nadzieję, że rozumiesz :)

Answer 1

wierzę szukasz tej wtyczki: equalizeBottoms Ben Alman

Answer 2

Można użyć height metody jQuery, aby uzyskać i ustawić wysokość elementu.

Musisz przejść przez elementy, znaleźć najwyższy, a następnie ustawić wysokość wszystkich elementów.

var maxHeight; 
$('div') 
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) 
    .height(maxHeigt); 

Wymień 'div' z jQuery selector że wybiera elementy, które chcesz wyrównać.

Answer 3

Cóż można dostać i ustawić wysokość z height()

height = $('#id').height() 

Loop przez elementy i sprawdzić wysokość, np:

$elements = $('.container'); 

var max_height = 0; 

for ($element in $elements) { 
    if (max_height > $element.height()) max_height = $element.height(); 
} 

$elements.height(max_height); 

Answer 4

Wow - ludzie naprawdę chcą zmusić jQuery oszustwa w tym jeden - możesz to zrobić za pomocą CSS. Od stopdesign:

Podczas tworzenia płynnych układów za pomocą CSS, oto kilka z odpadami I pamiętać:

• dwukrotnie div kolumnach: Tak jak ja nienawidzę używać dodatkowych znaczników, nie ma łatwiejszego sposobu w celu zapewnienia maksymalnej kompatybilności w wielu przeglądarkach niż użycie dwóch elementów div dla każdej kolumny. Zewnętrzne elementy div służą do ustawiania szerokości. Wewnętrzne elementy div służą do ustawiania dopełnienia, aby utworzyć białe odstępy między kolumnami.

• pomocą rynny stałej szerokości (lub szerokości rynny na podstawie wielkości typu): Kiedy szerokość kolumny zostaje zastosowane niezależnie od kolumny wypełnienia, jak powyżej wartości procentowe mogą być stosowane do szerokości, a piksele lub EMS może być używany do wypełniania. To, nie martwiąc się o jedną kolumnę trafiającą na dno innej kolumny, lub bez celowo nieumiejętnych kolumn, aby zawsze pasowały do ​​strony. Mimo że szerokość kolumn zmienia się w miarę, jak przeglądarka staje się szersza lub węższa, tekst na tej stronie zazwyczaj pozostaje tej samej wielkości. Ilość białego miejsca potrzebnego do komfortowego tekstu zależy bardziej od wielkości typu, niż od wielkości kolumny zawierającej ten tekst.

• Unikaj kolumn o stałej szerokości: o ile to możliwe, ustaw wszystkie kolumny jako procent szerokości. Kuszące jest myślenie o pasach bocznych i kolumnach nawigacyjnych jako o jednej szerokości statycznej, i pozwól głównej lub środkowej kolumnie robić wszystkie rozwijania. To szybko niszczy wszelkie proporcje, które mogły być starannie dobrane, ponieważ kolumny o stałej szerokości mogą wyglądać słabo i słabo w dużych rozdzielczościach. Lub szerokie paski boczne o stałej szerokości mogą stać się zniechęcające, powodując nadmierne zasilanie głównej kolumny przy mniejszych szerokościach przeglądarki.

Sztuką jest stworzenie bardzo szerokiego obrazu tła (lub dwóch obrazów dla układów 3-kolumnowych, a tym samym przesuwnych-charakteru techniki). Obraz jest częściowo nieprzezroczysty i częściowo przezroczysty. Zostaje wyłożony pionowo w pojemniku nadrzędnym, podobnie jak technika Dana Faux Columns. Nieprzezroczysta część obrazu powinna odpowiadać wartościom procentowym kolumny, którą pomaga utworzyć, dzięki czemu może być pozycjonowana z identyczną wartością pozycji tła. Dzięki temu przejście od nieprzezroczystego do przezroczystego staje się punktem osi dla położenia tła. Pozycja nieprzezroczystej części w obrazie może zostać zmieniona w zależności od kolejności treści w kodzie HTML, aby uzyskać prawie pożądany efekt.

Answer 5

Oczywiście, jeśli chcesz to rozwiązać kwestię równej wysokości, co chcesz, jest One True Layout:

http://fu2k.org/alex/css/onetruelayout/example/interactive

Answer 6

ja otrzymuję błąd NaN z kodem SLaks. Nadanie maxHeight wartości początkowej 0 sprawiło, że lewę.

var maxHeight = 0; 
$('div') 
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) 
    .height(maxHeight); 

Dzięki SLaks!

Answer 7

Jest to prosto ze stron dokumentacji jQuery:

$.fn.equalizeHeights = function(){ 
    return this.height(Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get())) 
} 
$('input').click(function(){ 
    $('div').equalizeHeights(); 
}); 

Answer 8

<script> 
function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
     thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
      tallest = thisHeight; 
     } 
    }); 
    group.height(tallest); 
} 
$(document).ready(function() { 
    equalHeight($(".column")); 
}); 
</script> 

see this example

Answer 9

Jest to prosty kod

var heights = $("element").map(function() 
{ 
    return $(this).height(); 
}).get(), 

MaxHeight = Math.max.apply(null, heights); 

lub

var highest = null; 
var hi = 0; 
$(".testdiv").each(function(){ 
var h = $(this).height(); 
if(h > hi){ 
    hi = h; 
highest = $(this); 
}  
}); 

highest.css("background-color", "red");