min-height Property


Home > Document > Web design > CSS > MS CSS > Page layout

min-height Property * IE 6.0 이상

min-height Property는 Table cell (TR, TD, TH) 의 최소 높이(minimum-height)를 지정하는 Property 입니다. Table cell 은height를 지정하지 않았을 경우 cell 속의 내용물(text, image 등) 의 크기에 따라 cell 의 높이가 자동으로 늘어나게 되기 때문에 내용물이 작을 경우 cell 의 높이는 낮아질 수 밖에 없습니다. 물론 이 경우 td, tr, th 등의 Tag 속에 height attribute 를 사용하여 높이를 지정할 수 있지만 Table 을 table-layout:fixed 로 지정했을 경우 cell 의 내용물이 지정한 height 보다 커지면 초과되는 부분이 잘려서 안보인다는 문제점이 있으므로, table-layout:fixed로 지정한 table을 사용할 경우에도 초과되는 부분도 잘리지 않으면서(사실 넘치는 부분이 잘린다는 문제 때문에 table-layout:fixed의 사용을 꺼리는 경향이 있습니다.), 내용물이 작아도 지정한 height를 유지하게 해 주는 Property가 min-height Property 입니다. 즉, min-height Property는 내용물이 작아도 지정한 최소 높이를 유지하고, 내용물이 넘치면 height도 따라서 커지는 성질을 가지고 있는거죠. 특히 요즘 처럼 One page layout 으로 만든 사이트가 유행하는 추세로 볼 때 상당히 유용하게 써 먹을 수 있는 Property라고 할 수 있습니다.

  [표 보는 방법]
min-height Property
Value <length> | <percentage>
Initial no
Applies to table-layout 이 fixed 로 지정된 TD, TH, TR
Inherited no
Percentages refer to the size of the box itself, element 자신이 들어가 있는 박스 크기에 의해서
Media Visual
Browser version IE 6.0 이상
HTML Syntax { min-height : sheight }
Scripting object.style.minHeight [ = sHeight ]




min-height Property 예제

아래의 예제는 첫 번째 cell은 CSS height property를 사용하여 cell 높이를 지정하고, 두 번째 cell은 min-height:100px 를 지정하고 cell 속에 내용물이 적을 경우, 세 번째 cell 은 역시 min-height:100px 로 지정하고 내용물이 지정한 높이를 초과한 경우입니다.

출력결과
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 height="100" 으로 지정하고 cell에 내용물이 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 적은 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우
table-layout fixed로 지정된 table에 min-height:100px 로 지정하고 내용물이 높이를 넘치는 경우

위와 같이 첫 번째 cell 은 넘치는 부분이 잘려져서 안 보이지만 두 번째 cell 은 내용물이 적을 경우 min-height 로 지정한 높이를 유지하다가 세 번째 cell 처럼 내용물이 min-height:100px 를 넘치는 내용물의 크기에 따라 늘어나게 됩니다.

소스 보기




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색