초기 상황:
웹 페이지 레이아웃에서 , 고정 높이 머리글과 바닥글을 제외하고 전체 본문 높이를 채우는 콘텐츠 div를 만들고 싶습니다.
해결책:
최소 높이 기준 설정:
최소 높이: 100%;로 HTML 및 본문 요소를 선언합니다. 이렇게 하면 전체 창 높이까지 확장됩니다.
콘텐츠에 대한 래퍼 만들기:
모든 내용을 포함하는 #wrapper div를 만듭니다. 머리글과 바닥글은 제외합니다. 절대적으로 배치하고 전체 창 크기로 제한합니다.
콘텐츠 영역 정의:
#wrapper 내부에서 #content를 생성합니다. div의 주요 콘텐츠입니다. 남은 공간을 채우려면 최소 높이를 100%로 설정하세요.
머리글 및 바닥글 위치 지정:
머리글 및 바닥글 요소 추가 고정된 높이와 적절한 색상. 음수 값이 있는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!