CSS 최소 높이 최소 높이 최대 높이 최대 높이

왜 min-height 및 max-height 스타일 속성을 사용합니까?

Css min-height 적용 위치 설명

내용이 없을 때 개체가 열리지 않도록 개체 상자를 설정했지만 내용을 확인할 수 없어 높이를 고정할 수 없습니다. 이제 최소 높이를 설정하려면 CSS가 필요합니다. 개체 상자가 올라갑니다. 콘텐츠가 작은 경우 최소 높이로 콘텐츠를 표시할 수 있습니다. 콘텐츠가 최소 높이보다 크면 콘텐츠가 증가함에 따라 개체도 늘어납니다.

Css max-height 최대 높이 적용 설명

이 속성은 거의 사용되지 않습니다. 아마도 높이를 높이고 레이아웃의 미화와 균일성에 영향을 미치는 너무 많은 콘텐츠를 피하기 위해 이 때 최대 높이 제한을 설정합니다. 예를 들어, 테이블 tr td 테이블 개체에 picture가 포함되어 있고 그림의 높이가 확실하지 않은 경우 그림이 tr td 테이블을 깨뜨리는 것을 원하지 않으면 CSS max-height를 통한 그림의 최대 높이.

CSS 최대 및 최소 높이 디렉토리

문법 및 구조

최대 및 최소 높이 사용 사례

max-height 최소 높이 최대 및 최소 높이 요약

css max-width

1.

1. 구문

min-height 및 max-height 값은 숫자 + html 단위입니다.

min-height:50px 최소 높이 50px

max-height:50px 최대 높이 50px

2.

div{min- height:50px }

div{max-height:50px }

2. 최대 및 최소 높이 사용 예시

최소 높이(min-height:)와 최대 높이(max-height)를 설정했습니다. ) 2개의 개체 상자에 대한 제한, 적용 사례의 효과를 쉽게 관찰할 수 있도록 두 상자의 CSS 너비와 CSS 테두리 스타일을 동일하게 설정했습니다.

1. 해당 CSS 코드

.divcss5-min,.divcss5-max{ width:300px; border:1px solid #F00}

.divcss5-min{ min-height:60px}

.divcss5-max{ max-height:60px;

margin-top:10px}

2. Case html 소스 코드 스니펫:

최소 높이는 60px입니다.

최대 높이는 60px입니다.

3. 최대 및 최소 높이 케이스 스크린샷

Css div 최소 및 최대 높이 스타일의 스크린샷

4. 두 객체의 내용을 늘립니다.

Html 코드:

60px

DIVCSS5 콘텐츠 추가

divcss5 콘텐츠 추가

;

최대 높이는 60px입니다.

www.divcss5.com

콘텐츠 추가

divcss5 콘텐츠 추가
< ;/div>

여기서 두 개체 상자의 콘텐츠를 60픽셀 높이 제한을 넘어 늘렸습니다

5. 실험적 스크린샷

브라우저의 최소 높이 최대 높이 사례 스크린샷

브라우저 스크린샷 최소 높이 및 CSS 최대 높이 테스트

팁, CSS 이름 ".divcss5-max"에

overflow

:hidden 스타일을 추가하면 최대 높이를 숨기고 오버플로 내용을 표시할 수 있습니다.

최대 높이 스타일 버그를 해결하기 위한 CSS 케이스 스크린샷

최대 높이 최대 높이 호환성을 해결하기 위한 DIV+CSS 케이스

6 DIVCSS5 케이스 설명

최대 높이를 제한하기 위해 하나의 상자를 설정했습니다. 다른 하나는 최대 높이를 제한하는 것입니다. 최소 높이 제한이 있는 개체에 콘텐츠가 많지 않으면 이 때 개체는 최소 높이 제한 값을 표시합니다. 콘텐츠가 최소 높이 제한을 초과하고 주문을 수용할 수 있으면 개체의 높이가 자동으로 늘어납니다. 후자는 max-height라는 최대 높이 제한이 있습니다. 콘텐츠가 작은 경우에는 차이가 없습니다. 그러나 콘텐츠가 많아 최대 높이 제한을 수용할 수 없는 경우 콘텐츠가 최대 높이 제한을 초과하게 됩니다. , 그러나 개체 자체는 여전히 최대 높이이므로 콘텐츠가 표시됩니다. 오버플로가 개체 상자를 초과하는 경우 CSS 오버플로 속성을 사용하여 오버플로 콘텐츠를 숨길 수 있습니다.

3. max-height min-height 최대 및 최소 높이 요약

최대 및 최소 높이 스타일은 사용하기 매우 편리하며 고정 높이의 단점을 충족하지만 현재는 지원되지 않습니다. IE7 이상 브라우저 및 기타 브라우저에서 다음 기사에서는 ie6 최소 높이 호환성과 ie6 최대 높이 호환성을 소개합니다.

위 내용은 CSS 최소 높이 최소 높이 최대 높이 최대 높이의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.