높이를 지정하지 않고 플로팅 텍스트를 확장하고 div에 맞추는 방법

Question

본문의 div 상자 내에서 텍스트를 이동시켜야하는 구조가 있습니다. 그러나 나는 그것을 작동시키지 못할 것 같다. 어쩌면 나는 위치와 함께 뭔가 잘못하고있다 : 태그? 여기

는 바이올린입니다 : http://jsfiddle.net/Tf5Z8/

이 내가 달성하기 위해 기대했다 무엇 : 그래서 http://oi58.tinypic.com/332njm9.jpg 텍스트가 추가 설상가상으로 (작거나 이상), 그 아래 그대로 유지하고 그에 따라 DIV 크기를 조정 것을. 지금은 #bodyContainer가 높이로 설정되어 있습니다 : 300px;

#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; } 

그러나 텍스트 양이 다른 많은 페이지가 있기 때문에이 작업을 원하지 않습니다.

감사합니다. 건배.

Answer 1

변경 #bodyContainerheightauto로 변경하십시오. 예 : JSFiddle

Answer 2

당신이해야 할 일은 min-height입니다. 따라서 height 속성을 min-height로 바꾸십시오. 그리고 너 끝났어.

Answer 3

절대 위치 사용에 문제가없는 경우이 방법을 시도하십시오. relative 위치를 #bodyContainer 및 absolute 위치에 #sidebarLeft으로 추가 한 다음 float:rightsidebarRight 위치로 추가하십시오. 이 fiddle

CSS는

#bodyContainer { 
    width:1024px; 
    min-height:100px; 
    margin:auto; 
    background-color:#f4f3e7; 
    padding-top:20px; 
    position:relative; 
    overflow:hidden; 
} 

#sidebarLeft { 
    height:100%; 
    width:360px; 
    background-color:#FFF; 
    margin-left:30px; 
    margin-bottom:20px; 
    position:absolute; 
    top:20px; 
    left:0 
} 
#sidebarRight { 
    height:100%; 
    width:634px; 
    float:right; 
}