Development Tip

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

yourdevel 2020. 10. 7. 21:22
반응형

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


다음 마크 업이 있습니다.

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


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

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


Dutchie432의 위 답변 코드

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

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

사용 overflow속성

overflow: hidden; 

overflow: auto;

overflow: scroll;

그것은 inshaAllah 작동합니다 :)


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;
}

참고 URL : https://stackoverflow.com/questions/4646708/css-how-to-get-scrollbars-for-div-inside-container-of-fixed-height

반응형