이 경우 플로팅 DIV에 평등 높이를 적용하려면 어떻게해야합니까?

두 열에서 서로 왼쪽으로 떠있는 DIV를 동적으로 파싱 중입니다. 문제는 DIV의 내용/높이가 다른 DIV보다 높으면 플로트에 대한 지우기가 없으므로 페이지가 더러워 보입니다.이 경우 플로팅 DIV에 평등 높이를 적용하려면 어떻게해야합니까?

나는 모든 DIV의 높이를 어떻게 만들 수 있습니까? (모든 DIVS에는 .cat-widget과 같은 특정 클래스가 있습니다.) 문제없이 배치되고 페이지에 완벽하게 정렬되도록 높이를 높이는 것이 좋습니다.

제안 사항, 권장 사항은 알려주세요.

출처

2010-12-02 Ahmad Fouad

을 :

이

// get both heights var heightFirst = document.getElementById('....').offsetHeight; var heightSecond = document.getElementById('....').offsetHeight; // find largest var maxHeight = Math.max(heightFirst, heightSecond); // set both to largest document.getElementById('....').style.height = maxHeight + 'px'; document.getElementById('....').style.height = maxHeight + 'px';

도 여기에 설명 된 몇 가지 CSS 솔루션이 있습니다 사업부에게? – Kyle

할 수 없습니다. 콘텐츠는 동적이며 다양합니다. 그렇지 않으면 주어진 클래스에 고정 높이를 고정시킬 수 있습니다. –

이 솔루션은 훌륭하게 작동합니다

<div style='display:table'> 
    <div style='display:table-row'> 
    <div style='display:table-cell'>..content..</div> 
    <div style='display:table-cell'>..content..</div> 
    </div> 
</div>

UPDATE를

Working example here 및 자습서 here. FF 3.6, IE8, Chrome 7 및 Safari $에서 작동하는 것으로 테스트되었습니다. 당신이 다시 떨어질 수

출처

2010-12-02 08:51:21 Ben

와우 .. 브라우저 간 호환이 가능합니까? 작동하기 때문에 –

테이블을 사용할 수도 있습니다.) –

이 질문은 유용합니까? Both columns same height as deepest column?

출처

2010-12-02 08:31:49 z00bs

모든 div의에로 height 및 overflow:hidden을 적용

출처

2010-12-02 08:32:49 ArK

내용이 동적이어서 고정 된 높이를 설정할 수 없습니다. 그 이유는 –

실제로 사용할 필요 :

이

<div class="somename" style="min-height: 300px;">

출처

2010-12-02 08:47:43 422

내용이 동적인데, 사용자가 위젯에 넣을 내용을 확실히 알 수 없으므로 높이가 가변적입니다. : –

자바 스크립트 솔루션입니다 : 클래스가 적용하는 당신이 명시 적으로 높이를 설정할 수 없습니다 http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

출처

2010-12-02 09:58:17 diolemo

이 경우 플로팅 DIV에 평등 높이를 적용하려면 어떻게해야합니까?

답변

관련 문제