DIV 적응형 높이를 만드는 방법

프로젝트를 완료하면 우리 모두 DIV 적응 높이 효과를 경험하게 될 것입니다. 따라서 오늘은 두 가지 상황에서 DIV 적응 높이 효과를 얻는 방법을 보여 드리겠습니다.

첫 번째 유형: 특정 높이의 콘텐츠가 증가할 때 DIV의 높이는 적응적이며, 콘텐츠가 작을 때 DIV는 특정 최소 높이를 갖습니다.

두 번째 유형: 최소 높이가 없으며, DIV는 높이에 완전히 적응합니다.

다음은 이 두 가지 상황과 해결 방법을 소개합니다

특정 최소 높이가 있습니다. 더 많은 콘텐츠가 추가되면 높이가 조정됩니다. 콘텐츠가 작을 때 DIV에는 특정 최소 높이가 있습니다. TOP

DIV 상자가 있으며 기본 높이는 200픽셀입니다. DIV 내부에서는 콘텐츠가 중복되고 제한된 높이를 초과하는 경우 DIV 적응형 높이에는 순수 CSS+DIV를 사용해야 하며 JS는 필요하지 않으며 Firefox 브라우저와 호환됩니다.

1. 답변 및 설명:

_height:200px; /* css 참고: IE6에서만 이 속성을 설정합니다. , IE6은 자동으로 설정된 높이를 높입니다*/

min-height:200px; /* cssComment : CSS의 최소 높이는 200px이며 IE6을 제외한 모든 브라우저를 지원합니다*/

이 설정은 호환됩니다. ie6, 7, 8, 9, 10, Firefox 등

2. 특정 설정 코드:

div{ 
_height:200px; 
min-height:200px 
/* css 注释：两个放置不分前后顺序，兼容所有浏览器 */ 
}

3. CSS 최소 높이 및 적응형 높이 공존 사례

2개의 DIV 상자를 설정했으며, 최소 높이는 200px입니다. , 콘텐츠가 작은 경우 DIV 상자의 최소 높이는 200px이고, 콘텐츠가 들어갈 수 있는 높이보다 클 경우 DIV 상자 적응형 높이, 관찰 및 참조 분석을 용이하게 하기 위해 너비를 100px로 균일하게 설정합니다. 검정색 1px CSS 테두리.

CSS 코드는 다음과 같습니다.

div{_height:200px; min-height:200px; border:1px solid #000; width:100px} 
/* css注释：设置最小高度，border边框，宽度 */ 
HTML代码片段：
<div>200高度能装下这点内容，设置最小高度200px</div> 
<div>设置最小高度200px<br /> 
而内容多，超出200px高度限制，DIV自适应高度<br /> 
<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位 
</div>

CSS 기본 적응 높이

DIV에 고정 높이를 설정하지 않거나 CSS 높이 스타일을 설정하지 않으면 DIV 상자의 기본값이 적응 높이로 설정됩니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트

Other 관련 기사를 주목하세요!

관련 자료:

JS 면접 질문 최신 분석

네이티브 js의 일반적인 방법 모음

JS 면접 질문 최신 분석

위 내용은 DIV 적응형 높이를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!