고정된 머리글과 바닥글을 사용하여 100% 신체 높이 Div를 달성하는 방법은 무엇입니까?

고정 머리글과 바닥글을 사용하여 100% 본문 높이 Div 달성

초기 상황:

웹 페이지 레이아웃에서 , 고정 높이 머리글과 바닥글을 제외하고 전체 본문 높이를 채우는 콘텐츠 div를 만들고 싶습니다.

해결책:

1. 최소 높이 기준 설정:

   최소 높이: 100%;로 HTML 및 본문 요소를 선언합니다. 이렇게 하면 전체 창 높이까지 확장됩니다.

2. 콘텐츠에 대한 래퍼 만들기:

   모든 내용을 포함하는 #wrapper div를 만듭니다. 머리글과 바닥글은 제외합니다. 절대적으로 배치하고 전체 창 크기로 제한합니다.

3. 콘텐츠 영역 정의:

   #wrapper 내부에서 #content를 생성합니다. div의 주요 콘텐츠입니다. 남은 공간을 채우려면 최소 높이를 100%로 설정하세요.

4. 머리글 및 바닥글 위치 지정:

   머리글 및 바닥글 요소 추가 고정된 높이와 적절한 색상. 음수 값이 있는 margin-top 및 margin-bottom 속성을 사용하여 #wrapper 위와 아래에 배치합니다.

구현:

<code class="css">html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}</code>

<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>

이 코드는 #content div가 고정 높이 머리글과 바닥글을 수용하면서 전체 본문 높이를 채우도록 보장합니다. Modernizr 스크립트를 사용하여 최신 브라우저 및 IE8에서 작동합니다(또는 머리글 및 바닥글 요소 대신 div를 사용하도록 수정할 수 있음).

위 내용은 고정된 머리글과 바닥글을 사용하여 100% 신체 높이 Div를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!