HTML과 CSS를 사용하여 스크롤 가능한 콘텐츠로 고정 머리글과 바닥글을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

HTML과 CSS를 사용하여 스크롤 가능한 콘텐츠로 고정 머리글과 바닥글을 만드는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-02 12:16:11

원래의

932명이 탐색했습니다.

How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?

스크롤 가능한 콘텐츠가 포함된 고정 머리글 및 바닥글

스크롤 가능한 콘텐츠가 포함된 고정 머리글 및 바닥글을 구현하려면 다음과 같은 최소 HTML 및 CSS를 사용하면 됩니다. 코드입니다.

<html>
  <body>

로그인 후 복사

body {
  height: 100%;
  width: 100%;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 200px;
  right: 0px;
  overflow: hidden;
}

#content {
  position: absolute;
  top: 200px;
  bottom: 200px;
  left: 0px;
  right: 0px;
  overflow: auto;
}

#footer {
  position: absolute;
  bottom: 0px;
  height: 200px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}

로그인 후 복사

이 HTML 및 CSS 코드는 중앙에 스크롤 가능한 콘텐츠 영역이 있는 고정 머리글과 바닥글. 머리글과 바닥글의 높이는 고정되어 있으며 콘텐츠 영역은 세로로 스크롤할 수 있습니다.

위 내용은 HTML과 CSS를 사용하여 스크롤 가능한 콘텐츠로 고정 머리글과 바닥글을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!