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을 제외한 모든 브라우저를 지원합니다*/

div{ 
_height:200px; 
min-height:200px 
/* 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>

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

JS 면접 질문 최신 분석

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

JS 면접 질문 최신 분석

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