반응형
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;
}
반응형
'Development Tip' 카테고리의 다른 글
Clojure가 클래스를 정의하는 데 하나가 아닌 5 가지 방법이있는 이유는 무엇입니까? (0) | 2020.10.07 |
---|---|
nodejs-http.request와 함께 response.write를 사용하는 경우 첫 번째 인수는 문자열 또는 버퍼 여야합니다. (0) | 2020.10.07 |
git 루트 폴더의 이름을 바꾸는 방법은 무엇입니까? (0) | 2020.10.07 |
LINQ는 IEnumerable에서 작동합니까? (0) | 2020.10.07 |
FileStream 대 / 차이점 StreamWriter? (0) | 2020.10.07 |