css overflow ( div 스크롤 설정 )
- 컴퓨터/css
- 2018. 11. 29. 23:33
브라우저 스크롤 말고 div에 스크롤을 생성 할 수 있다.
div에 css로 스크롤 생성 하는 방법은 overflow 이다.
최근 게시물이나 메인 화면에 작게 노출해줄때 사용하면 편리하다.
//---------------------------------------------------------------------------------------------------------------------------------------------------------------------
<style>
#over1 {
overflow: hidden;
width: 200px;
height: 150px;
border: 1px solid black;
margin-bottom:10px;
}
#over2 {
overflow-y: scroll;
overflow-x: hidden;
width: 200px;
height: 150px;
border: 1px solid black;
margin-bottom:10px;
}
#over3 {
overflow: scroll;
width: 200px;
height: 150px;
border: 1px solid black;
margin-bottom:10px;
}
#over4 {
width: 200px;
height: 150px;
border: 1px solid black;
}
</style>
1 : overflow: hidden;
<div id="over1">
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</div>
2. overflow-y: scroll; overflow-x: hidden;
<div id="over2">
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</div>
3. overflow: scroll;
<div id="over3">
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</div>
4. no overflow
<div id="over4">
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
<br/>
overflow1overflow2overflow3
</br>
overflow1overflow2overflow3
</div>
이 글을 공유하기