div가 부모 컨테이너의 나머지 수직 공간을 차지하도록합니다.

컨테이너의 전체 높이를 채우기 위해이 두 열의 "내용"<div>을 어떻게 얻을 수 있습니까?div가 부모 컨테이너의 나머지 수직 공간을 차지하도록합니다.

jsfiddle : Make children divs the height of tallest child : http://jsfiddle.net/7m4f7/8/

이것은이 질문에 후속이다.

여기 비슷한 질문이 있지만 솔루션이 제대로 작동하지 않는 것 같습니다. Make div (height) occupy parent remaining height

2013-05-16 Don P

을 다음과 같이 enter image description here

바이올린 here

마크 업 여기에 두 번째 대답을 살펴보십시오 CSS를 변경하지 않은 : 다음과 같은 얻을 http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – jabbink

내가 게시 한이 솔루션과 비슷한 솔루션을 div에 배치해도 괜찮 으면 구현할 수 있습니다. 여기에서 http://stackoverflow.com/questions/16545531/auto-stretching-vertical-columns-divs/16545816#16545816을 참조하십시오. 당신의 예와 비슷한 것을 적용 할 수 있습니다 .... – Fico

HTML이 얼마나 중요합니까? 현재 마크 업은 CSS만으로는 가능하지 않습니다. 그러나 희망이 있습니다. 국경은 얼마나 비판적입니까? 그리고 HTML을 약간 변경할 수 있습니까? –

정렬됩니다. 동일한 높이를 얻으려면 콘텐츠 div를 사용하여 패딩/여백 보정을 통해 항목 div를 푸시합니다. 제목 및 내용의 배경색이 이제는 독립적입니다. 원하는대로 변경할 수 있습니다. 인라인 블록 요소 사이의 자동 여백은 원하는대로 div에 적용된 일반 여백으로 바꿀 수 있습니다.

.row { 
    border: 1px solid red; 
    overflow:hidden; 
} 

.item { 
    float:left; 
    margin-right:4px; 
} 

.title, .content { 
    border: 1px solid rgba(0,0,0,0.2); 
} 
.content { 
     padding-bottom:1000px; 
    margin-bottom:-1000px; 
     background: rgba(0,0,0,0.1); 
} 
.title { 
    background-color: rgba(0,0,0,0.2); 
}

출처

2013-05-16 20:31:23 Fico

문자 그대로 CSS 클립 트릭입니다. 좋은. –

요청하신 내용과 정확히 일치하지는 않지만 충분할 수도 있습니다. 나는 수레를 사용, 인라인 블록 : 당신이 vertical-align: top;를 추가 할 때 상단 모서리 대신 디스플레이를 사용하는 잘

.item { 
    background: rgba(0,0,0,0.1); 
    display: inline-block; 
    vertical-align: top; 
}

JSFiddle

출처

2013-05-16 20:24:06

div가 부모 컨테이너의 나머지 수직 공간을 차지하도록합니다.

답변

관련 문제