상하 세트 바닥 글 (고정 바닥 글) 페이지의 바닥 글 구역이 브라우저 창 하단에 항상 확인하는 것입니다. 브라우저 충분할만큼 시각적 높이 페이지 하단으로 밀어 내용으로 글을 넘어 페이지의 내용이 때, 웹 콘텐츠가 충분히되지 않은 경우지만, 바닥 글 설정의 끝은 브라우저 창 하단에 남아있을 것이다.
1 네거티브 외부로부터 콘텐츠의 저부
이것은 주류 사용량 달성 값으로부터 콘텐츠 외부 네거티브 바닥 부 재활용 100 % 최소 높이의 내용 부분 인 매우 불만족 꼬리말 높이는 효과의 후속 실행을 초과 창 아래쪽에서 유지 될 때 .
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>专门建立的学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* 等于footer的高度 */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
이 방법은 (예 .push 같은) 추가적인 용기 팅 소자를 필요
참고이 필요하고 매우 친절하지 .footer 일관된 음의 높이 값, .wrapper 여백 하단 값.
2 네거티브 외부에서 상단 글
이 컨테이너에 부정적인 여백 바닥을 사용할 수 있기 때문에, 당신은 부정적인 여백 상단을 사용할 수 있습니까? 물론.
부모 요소의 외부 함량을 증가하고, 그 때문에 행 마진과 동일의 바닥 부에 바닥 글 콘텐츠의 가치의 높이.
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
그러나 한이 방법은 서로가 같은, 필요 여분의 불필요한 HTML 요소를 추가 할 수 있습니다.
높이를 설정 석회질 ()을 사용하여 3,
) (CSS3 새로운 계산 기능 석회질을 사용하여 - 한 가지 방법은 여분의 요소를 필요로하지 않는다
소자는, 내부 및 외부 가장자리를 제어 할 필요가 발생 사이 따라서 ~ 중첩 없을 것
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
당신은 내용을 20 픽셀 간격 두 가지 요소가 있다고 가정하기 때문에 높이 CALC () 왜 마이너스 70 픽셀, 오히려 높이보다 50 픽셀 바닥 글을 궁금 할 수 있으므로 70 픽셀 = 50 픽셀 + 20 픽셀
그러나 이러한 걱정하지 않아도 -
(4)가요 성 파우치 인 flexbox 레이아웃을 사용하여
세 가지 방법 위의 바닥 글 높이가 일반적으로 페이지 레이아웃에 도움이되지 않습니다 말하기, 고정 : 콘텐츠 레이아웃에 손상을 것입니다 고정 된 높이를 초과하면 내용은, 탄력, 변경됩니다. 주고 바닥 글 인 flexbox 사용 그래서, 그것은 작은 높이로 바뀌 아름다운 될 수 있습니다 ~ (≧ ∇ ≦)
专门建立的学习Q-q-u-n：⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
당신은 또한 더 많은 요소를 추가 할 수 위 또는 아래에 헤더를 추가 할 수 있습니다. 다음 방법 중 하나를 선택할 수 있습니다 :
플렉스 : 1 그 내용 (예를 들어 : .content) 높이 무료 확장 때문에
자동 : 마진 최고
그리드 레이아웃 격자를 사용하여 5,
인 flexbox 이상의 그리드뿐만 아니라 새로운 많은, 더 나은 매우 간결
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
불행하게도, 그리드 레이아웃 (그리드 레이아웃) 현재는 크롬 카나리아와 파이어 폭스 개발자 에디션 버전을 지원합니다.
개요
사실, 세트 레이아웃 바닥 글의 끝 어디에서나, 나 같은 많은 사람들이, 입문 에세이 바닥 글 설정 느낌이 좋은 말의 CSS-TRICKS의 다음 번역을 볼 수 있었던 유일한 아무것도 알 수 없었다 다음은 비교적 간단하다고 생각하지만.