집 >웹 프론트엔드 >CSS 튜토리얼 >HTML과 CSS를 사용하여 스크롤 가능한 콘텐츠로 고정 머리글과 바닥글을 만드는 방법은 무엇입니까?

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

Linda Hamilton원래의: 2024-12-02 12:16:111002검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html while using this

성명：

이전 기사：두 줄 뒤의 텍스트를 숨기고 "...123 T."와 같은 오버플로 표시기를 표시하는 방법은 무엇입니까?다음 기사：두 줄 뒤의 텍스트를 숨기고 "...123 T."와 같은 오버플로 표시기를 표시하는 방법은 무엇입니까?