다른 열을 사용하여 열의 높이를 높이는 방법

DIV의 두 번째 열을 옆에있는 열이 커지면 두 번째 열을 높이려고합니다.다른 열을 사용하여 열의 높이를 높이는 방법

내가 시도한 것을 '살균'하려는 시도에서 DIV 태그의 스타일을 사용하여 다음 HTML을 만들었습니다.

<body style = "width: 100%;"> 
    <div style = "position: relative; display: inline-block; width: 100%;"> 
     <div style = "display: inline-block; width: 700px; 
        background-color: #ff0000; float: left;"> 
    line 
    <br/> 
    line 
    <br/> 
    line 
    <br/> 
    line 
    <br/> 
    line 
     </div> 
     <div style = "width: 300px; height: 100%; 
         background-color: #000; float: left; color: #fff;"> 
    line 
     </div> 
    </div> 
</body>

(나는이 메시지에 올바른 형식 얻을 수없는 것 닫는 태그의 몇 가지가 있습니다.) 데이터가 내부 성장 때문에 내 프로젝트에서

는, 빨간색 상자 높이를 변경할 수 있으며, 페이지가로드 된 후 축소됩니다. 그래서 display : inline-block으로 설정했습니다.

이것을 표시하면 위에서 아래로 영역을 채우는 빨간색 영역 하나가 표시됩니다. 그리고 한 줄 아래로 내려가는 검은면이 있습니다.

검은 색면을 아래쪽으로 가져 와서 빨간색 줄로 축소하고 성장 시키려면 어떻게해야합니까? 검은 상자가 빨간색 상자와 같은 높이까지 확장되어야합니다.

출처

2013-10-17 Lee Loftiss

내가이'$에 대한 자바 스크립트/jQuery를 사용하십시오 ('사업부 #이') 높이 ($ ('DIV. #one '). 높이()); ' – jtheman

코드 예제에서 래퍼에 대한 닫는 DIV 태그가 없습니다. –

예. 나는 그것을 생각했다. 하지만 이것이 효과가있는 것 같습니다. 검은 색 세로 열은 높이 : 100 %로 설정되어 있으며 요소 검사기의 피드백에 따라 둘러싸인 DIV의 높이는 빨간색 DIV와 같습니다. 그래서 CSS로 할 수 있다면, 나는 그렇게 할 것입니다. –

가장 큰 div/요소를 찾고 다른 div를 같은 크기로 설정할 수 있습니다. 첫 번째 div가 커지면 동적 솔루션이므로 jQuery는 항상 동일한 높이로 설정합니다.

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

출처

2013-10-17 09:33:11 BrownEyes

이 도움이 될 수 :

http://css-tricks.com/fluid-width-equal-height-columns/

Pure CSS solution for equal column height with stacked divs

출처

2013-10-17 10:10:48 Lukas

다른 열을 사용하여 열의 높이를 높이는 방법

답변

관련 문제