max-height를 이용한 특정 높이가 되면 스크롤바가 생기는 div 박스.max-height를 이용한 특정 높이가 되면 스크롤바가 생기는 div 박스.

Posted at 2011. 8. 3. 00:27 | Posted in 프로그래밍 언어/HTML/CSS
제목 쓰기 참 어렵군요....;;;

내용입니다 1
내용입니다 2

내용입니다1
내용입니다2
내용입니다3
내용입니다4
내용입니다5
내용입니다6

이런걸 만드는 겁니다.

처음엔 높이가 내용에 종속적인 <div> 박스였다가,
내용이 길어져서 높이가 특정 값이 넘어가면 더이상 늘어나지 않고, 스크롤바가 생기는 <div> 박스입니다.

    내용입니다1

    내용입니다2

    내용입니다3

    내용입니다4

    내용입니다5

    내용입니다6
요점은 CSS의 max-height와 overflow-y

1. max-height로 높이에 최대값을 설정
max-height는 해당 엘리먼트의 최대 height를 지정하는 겁니다.
예를 들어 max-height: 100px 이라면,
해당 엘리먼트는 내용에 따라 height가 10px이 될 수도 있고 100px이 될 수도 있지만, 101px은 될 수 없습니다.
이렇게 특정 높이가 되면 height가 증가하지 않도록 만듭니다.

그.러.나.
IE에서는 max-height가 안 먹히네요. 심지어 IE8에서도.
대신에 위에 보이는 것 처럼 height: expression(...)을 사용하면 됩니다.
의미는 간단하게, '높이가 99px보다 크면 height를 100px로 설정하고, 아니면 auto로 설정한다'
즉, 높이는 100px을 초과할 수 없고, 100px보다 작으면 내용에 따라 늘었다 줄었다 하는거죠.
max-height처럼!
( * 출처: http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/ )

2. 넘어가는 내용을 위해 스크롤바 생성
overflow는 내용이 엘리먼트를 넘어갔을 때 어떻게 표현될 것인지를 설정합니다.
overflow-y: auto 로 설정하면 세로로 내용이 넘어갈 때만 세로 스크롤바가 생기는거죠.
( * 자세한 건 http://www.w3schools.com/cssref/pr_pos_overflow.asp 를 참조 )


//

티스토리툴바