2011-01-10 9 views
63

의 컨테이너 내부의 div 스크롤바를 얻을 어떻게 다음과 같은 마크 업이 있습니다CSS : 고정 높이

<div class="FixedHeightContainer"> 
    <h2>Title</h2> 
    <div class="Content"> 
    ..blah blah blah... 
    </div> 
</div> 

CSS의는 다음과 같습니다

.FixedHeightContainer 
{ 
    float:right; 
    height: 250px; 
    width:250px; 
} 
.Content 
{ 
    ??? 
} 

인해 내용의 높이를 div.Content은 일반적으로 div.FixedHeightContainer에서 제공된 공간보다 큽니다. 지금이 순간, div.Content 즐겁게 div.FixedHeightContainer의 바닥 밖으로 빠져 나오 - 내가 원하는 전혀 것. 높이가 맞게 너무 큰 경우

어떻게 div.Content가 스크롤바 도착 지정 않는다 (단 바람직하게는 수직,하지만 난 까다로운 아니에요)?

overflow:autooverflow:scroll은 기괴한 이유로 인해 아무런 성과가 없습니다.

답변

109

설정하면 overflow은 처리해야하지만 높이를 Content으로 설정해야합니다. height 속성이 설정되어 있지 않으면 div가 필요한만큼 세로로 커지고 스크롤 막대가 필요하지 않습니다.

참조 예 : http://jsfiddle.net/ftkbL/1/

+0

좋아 - 감사합니다. 그래서 div.Content의 높이를 지정해야합니까? 나는 그것이 맞지 않을 것이라는 점을 컨테이너에서 해결할 것이라고 생각하고, 그 기초에 스크롤 바를 적용했다. – David

+6

당신이 고정 된 높이'content' 블록을주는 경우에, 당신이주지해야한다'content' 블록이 밀려 할 수있다 '그래서 당신이 당신의 제목이 될 것입니다 얼마나 높이 알 수 없기 때문에, 고정 된 높이를 FixedHeightContainer'. 참조 : http://jsfiddle.net/ftkbL/2/ 'overflow : scroll'을 사용하여 고정 높이 ** only **를 요소에 설정해야합니다. 참조 http://jsfiddle.net/ftkbL/3/ 또는 나는 (첫 번째 링크에서) 당신의 점을 볼 수 있지만 제목 텍스트는 알려진 이상 휴식하기에 너무 짧은입니다 http://jsfiddle.net/ftkbL/4/ – RoToRa

+0

사용자가 비현실적인 크기로 텍스트를 부 풀리지 않는 한 라인. – David