2012-11-20 4 views
3

에서 오버 플로우에 맞게 사업부 컨테이너의 크기를 조정하는 방법 : 자식 DIV 요소의 목록이 포함내가 내 자식 사업부와 사업부 컨테이너가 자식 DIV

<div id=mainWrapper> 
    <div id=child> 
    </div> 
<div> 

#mainwrapper height:100%, width:900px 
#child height:100%, width:50% overflow:visible float:right 

합니다.

자식 오버플로가 mainWrapper 높이보다 클 때 mainWrapper의 크기를 조정하는 방법은 무엇입니까?

나는 많은 CSS와 몇 가지 스크립트를 시도했다 : $ ('# mainWrapper'). css ('height', $ ('# child'). height());

아무 것도 작동하지 않습니다.

답변

1

설정 오버 플로우

#mainwrapper { 
    width:900px 
    overflow: auto; 
} 

그것 hasLayout의 일 수레를 사용하여.

+0

하지만 overflow : auto가 필요하지 않습니다. 아이들이 오버플로하기를 원합니다. 보이는 것이고 오버플로에 맞추기 위해 메인 랩퍼의 높이를 다시 늘리고 싶습니다. –

+0

실제로 이것이하는 일. 자식이 900px 너비를 초과하지 않는 한 스크롤바가 생기지 않을 것입니다. 그래도 높이를 없애야합니다. 그렇지 않으면 스크롤바가 나타납니다. 이 옵션을 실제로 사용 했습니까? –

+0

나중에 높이 속성을 제거하면 작동합니다. 감사 –

4

#child 종료 후 clearfix를 사용하십시오. 떠 다니는 div는 부모 div를 동일한 높이로 끌어 올리려면 지워야합니다. mainwrapper에 자동 :

<div id=mainWrapper> 
    <div id=child> 
    </div> 
    <div style='clear:both;'><!--clear--></div> 
    <div> 

    #mainwrapper height:100%, width:900px 
    #child height:100%, width:50% overflow:visible float:right 

참조 : http://www.webtoolkit.info/css-clearfix.html

What methods of ‘clearfix’ can I use?

http://css-tricks.com/snippets/css/clear-fix/

+0

이 수정 프로그램에 문제가 있습니다. mainflash 클래스를 clearfix로 설정합니다. 다음 .clearfix를 추가합니다. { 내용 : "."; display : 블록; 신장 : 0; 삭제 : 둘 다; 공개 : 숨김; } 내 css 파일에 . 그리고 그것의 작동하지 않습니다 btw 내 mainWrapper 2 어린이 divs 있습니다. 하나는 오른쪽으로 떠 있고 다른 하나는 왼쪽으로 떠 있습니다. 플로트 오른쪽 자식 만 오버플로 : 보이는 및 문제가 발생했습니다 –

+0

좋아, 그럼 당신은 약간의 clearfixes를 읽었어요? 불행히도 모든 상황에서 모든 기능이 작동하는 것은 아닙니다. 가장 일반적인 경험 법칙은 부유 한 내용을 모두 풀어주고 부모를 닫기 전에 두 가지를 모두 없애기를 원한다는 것입니다. 그래서 나는 보통'
jammypeach

0

의견을 쉽게 간과 할 수 있기 때문에 새로운 대답으로 작성되었습니다. 아이에 대한 overflow:visible을 달성하기 위해 Damien Overeem

mainwrapper에 크레딧은, 오버 플로우의 높이로 크기를 조정 아동과 mainwrapper 모두에서 height 속성을 제거합니다.
mainwrapper에는 overflow: auto을 설정하십시오.