CSS를 사용하여 고정 헤더 및 바닥 글에 대한 레이아웃을 구현하는 방법 및 모바일 페이지에서 스크롤 가능한 컨텐츠 영역은 무엇입니까?

모바일 페이지 : 고정 헤드, 하단 및 스크롤 가능한 콘텐츠 영역을위한 CSS 레이아웃 솔루션

모바일 개발에서는 일반적인 요구 사항이 다음과 같습니다. 페이지의 헤드와 하단이 고정되어 있으며 중간 컨텐츠 영역을 위아래로 스크롤 할 수 있습니다. 이 기사는이 효과를 달성하기 위해 몇 가지 CSS 레이아웃 방법을 소개합니다. HTML 구조에 헤더 ( .head ), 컨텐츠 영역 ( .content ) 및 바닥 글 ( .foot )의 세 부분이 포함되어 있다고 가정합니다.

해결책

1. position: fixed; 고정 포지셔닝 방법

이 방법은 고정 위치를 사용하여 헤드와 하단을 고정하고 컨텐츠 영역을 스크롤 할 수 있습니다.

 html, body {
  높이 : 100%;
  여백 : 0;
  패딩 : 0;
}

몸 {
  디스플레이 : Flex;
  플렉스 방향 : 열;
}

.머리 {
  위치 : 고정;
  상단 : 0;
  왼쪽 : 0;
  오른쪽 : 0;
  Z- 인덱스 : 1000; /* 헤드가 내용 위에 있는지 확인*/
  배경색 : #f8f8f8;
  패딩 : 10px;
}

.콘텐츠 {
  플렉스 : 1; /* 나머지 공간을 차지하십시오*/
  오버플로 -Y : 자동;
  패딩 탑 : 50px; /* 머리 높이 고려*/
  패딩 바닥 : 50px; /* 하단 높이 고려*/
}

.발 {
  위치 : 고정;
  하단 : 0;
  왼쪽 : 0;
  오른쪽 : 0;
  Z- 인덱스 : 1000; /* 하단이 내용 위에 있는지 확인*/
  배경색 : #f8f8f8;
  패딩 : 10px;
}

.head 및 .foot 사용 position: fixed; 고정 된 z-index 내용보다 높습니다. .content flex: 1; 나머지 공간을 차지하려면 overflow-y: auto; 스크롤을 달성합니다. padding-top 및 padding-bottom 머리와 바닥에 의해 콘텐츠가 가려지는 것을 피하십시오.

2. Flexbox 탄성 상자 레이아웃 방법

Flexbox는이 레이아웃도 쉽게 구현할 수 있습니다.

 html, body {
  높이 : 100%;
  여백 : 0;
  패딩 : 0;
}

몸 {
  디스플레이 : Flex;
  플렉스 방향 : 열;
}

.머리 {
  Flex-shrink : 0; /* 머리 수축 방지*/
  높이 : 50px; /* 고정 헤드 높이*/
  배경색 : #f8f8f8;
  패딩 : 10px;
}

.콘텐츠 {
  플렉스 : 1; /* 나머지 공간을 차지하십시오*/
  오버플로 -Y : 자동;
  배경색 : #ffffff;
}

.발 {
  Flex-shrink : 0; /* 바닥 수축 방지*/
  높이 : 50px; /* 고정 바닥 높이*/
  배경색 : #f8f8f8;
  패딩 : 10px;
}

flex-shrink: 0; 수축을 방지하기 위해 height 속성은 고정 높이를 설정합니다. .content flex: 1; 나머지 공간을 차지하고 스크롤을 설정합니다.

3. 그리드 그리드 레이아웃 방법

그리드 레이아웃도 적용됩니다.

 html, body {
  높이 : 100%;
  여백 : 0;
  패딩 : 0;
}

몸 {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 50px 1fr 50px; /* 헤드, 내용 영역, 하단 높이 정의*/
}

.머리 {
  배경색 : #f8f8f8;
  패딩 : 10px;
}

.콘텐츠 {
  오버플로 -Y : 자동;
  배경색 : #ffffff;
}

.발 {
  배경색 : #f8f8f8;
  패딩 : 10px;
}

grid-template-rows 헤드, 컨텐츠 영역 및 하단의 행 높이를 직접 정의하고 1fr 컨텐츠 영역이 나머지 공간을 차지한다는 것을 의미합니다. .content 설정 스크롤.

위의 세 가지 방법 모두 목표 레이아웃을 달성 할 수 있으며 선택할 방법은 개인 선호도 및 프로젝트 요구에 따라 다릅니다. 실제 상황에 따라 머리와 바닥의 높이와 스타일을 조정해야합니다.

위 내용은 CSS를 사용하여 고정 헤더 및 바닥 글에 대한 레이아웃을 구현하는 방법 및 모바일 페이지에서 스크롤 가능한 컨텐츠 영역은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!