외부 div를 얻는 방법 내부 div 함께 자라기

Question

내부 div에 내부 div가있는 컨테이너 div가 있습니다. 내 div가 높이 (내부) div의 내용과 함께 자라고 싶습니다. 최소 높이를 설정했지만 외부 div의 크기는 설정 한 최소 높이와 다른 높이가 아닙니다.

<div id="containerDiv"> 
    <div class="innerDiv"> 
     <div id="header" class="layout">...</div> 
     <div id="mainMenu" class="layout">...</div> 
     <div id="content" class="layout">...</div> 
     <div id="footer" class="layout">...</div> 
    </div> 
</div> 

이것은 CSS는 다음과 같습니다 :

#containerDiv { 
    background-image: url('/Content/images/backgroundimage.png'); 
    min-height: 760px; 
    width: 100%; 
    border-radius: 1px; 
    box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
    overflow: auto; 
} 
.innerDiv{ 
    border-radius: 1px; 
    -webkit-border-radius: 1px; 
    box-shadow: 0 0 86px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
    position: absolute; 
    background-color: white; 
} 

이 바이올린은 내 문제를 볼 수 있도록해야

이

은 HTML입니다. 빨간색 div는 흰색과 같은 높이 여야합니다. 너비는 괜찮아 100 %라고 가정합니다. 행운과 나는 (컨테이너)에 자동으로 오버 플로우 속성을 설정하려고 this 솔루션을 기반으로

http://jsfiddle.net/arrsoph87/euB8H/ 

. this 솔루션을 기반으로 컨테이너의 속성 float을 왼쪽으로 설정하려고했습니다. 이것도 작동하지 않았다. 또한 또한이 작업을 얻을 수 없었다 다른 post

<div style="clear:both;"></div> 

에 따라이 줄을 추가, (오른쪽 내부 사업부를 닫기 전에, 의미)이 라인

<div id="footer" class="layout">...</div> 

후 권리를 추가하는 시도 . 어떤 제안?

Answer 1

이것은 일반적으로 내디브가 오른쪽이나 왼쪽으로 떠있는 경우 발생합니다. innerDiv의 클래스 정의를 추가하지 않은 것 같습니다. 일반적으로이 해결책은 innerDiv의 끝 태그 뒤에 (앞에는 없지만) 추가하는 것입니다.

Answer 2

overflow: auto에서 overflow: hidden으로 변경하십시오. 그럴 게.

#containerDiv { 
    background-image: url('/Content/images/backgroundimage.png'); 
    min-height: 760px; 
    width: 100%; 
    border-radius: 1px; 
    -webkit-border-radius: 1px; 
    -o-border-radius: 3px; 
    box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 

    overflow: hidden; // <------- 
} 

Answer 3

좋아, 문제는 위치 : innerDiv의 절대 속성입니다. 나는 그것을 친척으로 바꿨고 효과가있었습니다.

<div id="containerDiv"> 
    <div class="innerDiv"> 
     <div id="header" class="layout">HEADER</div> 
     <div id="mainMenu" class="layout">MAIN MENU</div> 
     <div id="content" class="layout">CONTENT</div> 
     <div id="footer" class="layout">FOOTER</div> 
    </div> 
</div>​ 

그리고 CSS :

#containerDiv 
{ 
    background-image: url('/Content/images/backgroundimage.png'); 
    min-height:760px; 
    width: 100%; 
    border-radius: 1px; 
    -webkit-border-radius: 1px; 
    box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
    overflow:hidden; /*added*/ 
    /* removed overflow:auto; */ 
} 
.innerDiv 
{ 
    border-radius: 1px; 
    -webkit-border-radius: 1px; 
    box-shadow: 0 0 86px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 
    position: relative; /*added*/ 
    /*removed position:auto;*/ 
    left:230px; /*added*/ 
    background-color:white; 
    width: 100px; 
}​ 

나는이 새로운 바이올린에 배치 다음은 관련 HTML 될 것이다. 그 지적

http://jsfiddle.net/arrsoph87/BC5n8/