아이 div 만들기 최대 높이 걸릴

나는 .box-contentdiv 상자 A/boxB div 안에 남아있는 최대 높이 걸릴하려고합니다. 나는 div.box-header이고 .box-content은 박스 A/박스 B div입니다. .box-content은 .box-header으로 div을 공유합니다.아이 div 만들기 최대 높이 걸릴

이 JSFiddle에서 .box-content은 부모 div 외부로 전송됩니다.

어떻게 순수 CSS이이 규칙을 계정에 복용이 문제를 해결 할 수 있습니다

이

신축성있는 .box-content의 높이 (성장이/때마다 창 크기 변경 축소);
.box-content의 최소 높이는 200px입니다.

.box-content는 부모의 100 %로 설정하지만 너무 .box-content가 아래로 밀려 부모 내부와 (의 크기를 오버플로가있는 .box-header이 :

출처

2013-12-16 Quoter

부트 스트랩 포함 여부를 알 수 없으며 사용하지 않습니다. – Morpheus

'.container'는 부트 스트랩에서입니다 :) – Quoter

overflow은 (내가 여기 당신의 인생을 쉽게 느낄 수) 옵션 인 경우, 여기

아래 CSS (2 라인 변경)하는 demo

유지 HTML 동일

.boxA { 
    width: 220px; 
    padding: 0px 3px 5px 5px; 
    float: left; 
    height: 100%; 
    margin-bottom: 0px; 
    border: solid 1px green; 
    overflow:hidden; /*added this*/ 
} 

.boxB { 
    width: 420px; 
    padding: 0px 5px 5px 3px; 
    float: right; 
    height: 100%; 
    border: solid 1px red; 
    overflow:hidden;/*added this*/ 
}

출처

2013-12-16 11:59:05 NoobEditor

이 작업을하려면 잠시 시간을 내 시어보십시오. 뭔가 다른 걸 망치고 있었어. 감사! – Quoter

당신이 직면하고있는 문제는 .box-content) 부모의 높이를 100 % 유지합니다.

나는이 CSS를 제안 할 수 있습니다 :

.box-content { height: 90%; } 

.box-header { 
    position: relative; 
    background-color: green; 
    padding:11px 8px 5px; 
    color: white; 
    height:10%; 
}

이 FIDDLE

출처

2013-12-16 11:52:45

은 반응 형 높이를 도청 한 혼수 상태를 잊어 버렸습니다. –

나는 그것을 알았지 만 내가 성취하려는 것을 설명하기위한 것이 었습니다. 고정되다. stretchable 헤더가 매우 못생긴 보입니다. 당신의 도움을 주셔서 감사합니다! +1 – Quoter

당신은 자식 DIV 더 큰 높이를 가지고있는 경우에 스크롤로 부모 div의를 설정할 수 있습니다 참조하십시오.

.boxA{ overflow:auto; } .boxB{ overflow:auto; }

출처

2013-12-16 11:53:31 saintybalboa

아이 div 만들기 최대 높이 걸릴

답변

관련 문제