CSS 열이 행 높이를 채우지 않습니다

Question

여기에서 도움을 얻을 수 있는지 궁금합니다. 피들에서 나는 필요한 마크 업을 대부분 가지고있다.

http://jsfiddle.net/theDawckta/54z3J/

나는 행의 하단에 확장 열 1의 columnItem을 만드는 방법을 알아낼 수 없습니다. 제가 열 1에서보고 싶은 것은 검은 색 콘텐츠를 같은 크기로 남겨 두면서 녹색 행 부분을 녹색으로 채우는 것입니다.

나는 그것이 불가능하다고 생각한다. 행운을 빈다, 이것으로 충분하다.

Answer 1

당신은 CSS를 사용하여 그것을 할 수 없지만, 당신은 자바 스크립트 방법을 통해 이것을 할 수 있습니다. 콘텐츠를 변경할 때마다 스크립트를 실행해야한다는 것을 의미하기 때문에 권장하지 않습니다. 항상 그 사실을 언제인지 알지 못합니다.

이 문제가 중요하면 테이블을 사용하는 것이 좋습니다.

Answer 2

Omer Ben-Nahum은 테이블을 제안했지만 콘텐츠를 마크 업하려는 방법이 확실하지 않습니다. 실제로 CSS를 사용하여이 효과를 얻을 수있는 방법은 없지만 사이트에서 작동하도록 할 수있는 몇 가지 해결 방법을 사용할 수 있습니다. 표 대신에 Faux Columns을 사용하십시오.

Answer 3

실제로 코드를 꽤 많이 잘라 냈습니다. 추가 div가 필요하면 사전에 사과해야합니다 (하지만 나중에 추가하는 것은 어렵지 않습니다). 또한, 당신은 IE에서 이것을 테스트하고 싶을지도 모른다 - 나는 어떤 버전이 잘리는 지 잘 모르겠다. (그러나 나는 IE7 +에서 작동한다고 생각한다.)

HTML

<div class="row"> 
<div class="column"> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
</div> 
<div class="column"> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
</div> 
</div> 

CSS는

정말 아주 간단합니다 작동 방법

.row { 
overflow:hidden; 
} 
.column { 
float:left; 
width:50%; 
padding-bottom:10000px; 
margin-bottom:-10000px; 
} 

/* You can remove everything under this comment */ 
.columnItem { 
padding:10px; 
margin:5px; 
background:blue; 
} 
.column:nth-of-type(1) { 
background:yellow; 
} 
.column:nth-of-type(2) { 
background:pink; 
} 

. 각 행은 실제 콘텐츠가있는 모든 항목을 숨 깁니다 (각 열은 padding-bottom:10000px;을 사용하여 10,000 픽셀을 내린 다음 margin-bottom:-10000px;으로 다시 백업합니다.) 픽셀 수를 늘리거나 줄일 수 있습니다. 충분히 커야합니다. 콘텐츠

는 PS는 -.. 뭐든지 가능, 불가능은 내가 전에 여러 번 사용했습니다 일 ~ NSA

이

Answer 4

bfroh의 솔루션이 오래 걸리지 만 일반적으로 나는 보통 같은 상황을 에뮬레이션 할 배경 이미지를 사용 이 부분 (하나의 div의 콘텐츠로는 충분히 크지 않음)

포장 용기 배경 이미지는 왼쪽 div 전체에 대한 배경색을 가질 수 있으며 'repeat-y'로 설정하면됩니다.

이런 종류의 문제 (내 경험)를 다루는 것은 bfroh가 게시 한 해킹이나 이.

희망이있었습니다.