CSS: 최소 높이는 Firefox 브라우저 솔루션과 호환되지 않습니다.

페이지를 구성할 때 일반적으로 머리글, 본문, 바닥글의 세 부분으로 나눕니다. 다음 페이지와 같습니다.

이때 바닥글 부분이 페이지 중앙에 나타나지 않도록 본문 부분의 최소 높이를 설정해야 합니다. 예를 들어 다음과 같은 작성 방법이 있습니다.

.page-content-header {    　　
min-height: 5%;
}
.page-content-body {    　　
min-height: 100%;}
.page-content-footer {    　　
min-height: 5%;}

이 작성 방법을 사용하면 본문 부분이 페이지 크기를 채울 만큼 높이가 됩니다. 바닥글 부분은 자연스럽게 페이지의 가장 아래쪽에 위치하게 되며, 본문 부분의 내용은 100%를 초과하면 높이가 자동으로 열리고 오버플로가 발생하지 않습니다.

그러나 문제는 Firefox 브라우저가 이 쓰기 방법과 호환되지 않는다는 것입니다. min-height: 100%는 전혀 적용되지 않습니다.

.page-content-body {    　　
min-height: 100%;    　　
/*火狐兼容*/    　　
min-height: 600px !important;}
.page-content-body:after {   　　
content:"";　　
visibility:hidden;　　
display:block;　　
clear:both;　　
height:0px;}

먼저 우리는 다음 방법을 사용할 수 있습니다. Firefox를 탐색하려면 !important를 사용하세요. 브라우저로 해킹하고 최소 높이를 600px로 설정한 다음 의사 요소를 사용하세요. 스타일을 삭제한 후 콘텐츠가 최소 높이를 초과하면 높이가 그에 따라 증가합니다.

표시 상자 유형 표시를 블록 수준 요소 블록으로 설정하고, 왼쪽과 오른쪽 모두에 부동 요소를 허용하도록 Clear를 설정하고, 삽입한 생성된 콘텐츠가 비어 있는 다음 높이를 0으로 설정하고, 요소를 숨김으로 설정합니다.

이를 통해 Firefox는 적응형 이상의 최소 높이와 콘텐츠를 얻을 수 있습니다.

위 내용은 CSS: 최소 높이는 Firefox 브라우저 솔루션과 호환되지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!