CSS : 고정 높이의 컨테이너 내부에서 div에 대한 스크롤바를 얻는 방법


93

다음 마크 업이 있습니다.

<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:auto그리고 overflow:scroll어떤 이상한 이유로, 아무것도하지 않고있다.

답변:


157

설정은 처리 overflow해야하지만 높이 Content도 설정해야합니다 . height 속성이 설정되지 않은 경우 div는 필요한만큼 세로로 커지고 스크롤바가 필요하지 않습니다.

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


괜찮 감사. 그래서 div.Content의 높이를 지정해야합니까? 나는 그것이 맞지 않는 컨테이너에서 작동하고 그 기준으로 스크롤바를 적용한다고 가정했습니다.
David

6
Content고정 높이 를 주면 FixedHeightContainer제목이 얼마나 높은지 알 수 없어서 Content밀려날 수 있으므로 고정 높이를 주면 안됩니다 . 참조 : jsfiddle.net/ftkbL/2 를 사용하는 요소 에만 고정 높이를 설정해야합니다 overflow: scroll. 참조 jsfiddle.net/ftkbL/3 또는 jsfiddle.net/ftkbL/4
RoToRa

(첫 번째 링크에서) 귀하의 요점을 보았지만 제목 텍스트는 알려져 있으며 사용자가 텍스트를 비현실적인 크기로 부 풀리지 않는 한 줄을 넘기에는 너무 짧습니다.
David

높이가 짧고 스크롤바를 동시에 숨기는 방법이 있습니까? 이렇게하면 사용자가 모바일 장치에서 아래로 드래그하면 아래로 스크롤되는 것을 볼 수 있지만 브라우저에 2 개의 스크롤 막대가 표시되는 번거 로움이 없습니다.
klewis

@blackhawk-내가 아는 것은 아닙니다. 이를 위해 Javascript를 사용해야 할 수도 있습니다. 특히 jQuery Draggable 라이브러리를 생각하고 있습니다. jqueryui.com/draggable- 고려해야 할 한 가지는 ... 데스크톱 사용자가 스크롤하는 방법을 어떻게 알 수 있습니까?
Dutchie432

2

FWIW, 여기 내 접근 방식 = 나를 위해 작동하는 간단한 방법이 있습니다.

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

1

Dutchie432의 위 답변 코드

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

-2

사용 overflow속성

overflow: hidden; 

overflow: auto;

overflow: scroll;
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.