콘텐츠가 페이지 크기보다 짧은 경우 고정 바닥 글
디에고 우나 뉴
잘 작동하는 바닥 글이 있지만 페이지의 콘텐츠 크기가 페이지 크기보다 짧으면 바닥 글이 페이지 하단이 아닌 콘텐츠 아래에 렌더링됩니다. 다음은 이미지입니다.
다음은 내 코드 (jsbin 스 니펫)입니다.
.footer {
position: absolute;
width: 100%;
margin-bottom: 0;
background-color: #2D2D2D;
height: 100px;
text-align: center;
color: white;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
</head>
<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
@RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a></p>
</div>
</body>
</html>이 문제를 해결하고 항상 바닥 글을 페이지 하단에 유지하려면 어떻게해야합니까?
Dippas
이 고정 바닥 글을 사용할 수 있습니다.
html,
body {
height: 100%;
margin: 0
}
.contentBody {
min-height: 100%;
/* equal to footer height */
margin-bottom: -100px
}
.contentBody:after {
content: "";
display: block
}
.footer,
.contentBody:after {
height: 100px
}
.footer {
width: 100%;
background-color: #2D2D2D;
text-align: center;
color: white
}<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
@RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a>
</p>
</div>
</body>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
페이지 높이가 짧은 경우 바닥 글이 페이지 하단에 있는지 확인합니다.
- 2
콘텐츠가 충분히 크지 않은 경우에도 화면 하단에 내 바닥 글 강제 적용 (고정되지 않음)
- 3
바닥 글 로고가 올바르게 정렬되지 않고 바닥 글 콘텐츠와 겹칩니다.
- 4
바닥 글이 내 콘텐츠를 가리고 있습니다.
- 5
(CSS) 고정 바닥 글이 콘텐츠와 겹칩니다.
- 6
jquery mobile : 탐색 패널이 크기가 조정되지 않은 고정 바닥 글, 콘텐츠가 중앙에 배치되지 않음
- 7
Vaadin 기본 레이아웃 : 고정 머리글 및 바닥 글 + 스크롤 가능한 콘텐츠
- 8
고정 바닥 글은 동적 Rails 콘텐츠 아래에 고정되지 않습니다.
- 9
기본 콘텐츠를 숨기는 고정 바닥 글 (고정되지 않음)
- 10
페이지 콘텐츠가 화면보다 작은 경우에도 바닥 글을 항상 페이지 하단에 유지하는 방법은 무엇입니까?
- 11
바닥 글은 항상 콘텐츠 하단에 있으며, 뷰포트 하단에 콘텐츠가 충분하지 않은 경우
- 12
CSS 고정 바닥 글-콘텐츠 테두리를 바닥 글까지 확장
- 13
CSS : 전체 높이 콘텐츠 DIV가있는 고정 바닥 글
- 14
바닥 글은 페이지 콘텐츠 아래에 배치되지 않고 뷰 포인트 높이에 배치됩니다.
- 15
이미 페이지 수준 머리글 및 바닥 글로 묶인 콘텐츠 내부에 고정 바닥 글 추가
- 16
콘텐츠가 스크롤 높이를 초과하지 않을 때 CSS '콘텐츠 바닥 글'이 하단에 고정되지만 초과 할 때 콘텐츠와 함께 흐릅니다.
- 17
바닥 글을 WINDOW (페이지 아님) 하단에 유지하고 콘텐츠가 겹치지 않도록합니다.
- 18
레이아웃 (페이지의 100 %가 아닌 CSS 그리드) 콘텐츠 그리드와 바닥 글 사이에 작은 간격이 있습니다.
- 19
고정 HTML 머리글 및 바닥 글이있는 페이지 레이아웃, 유연한 콘텐츠
- 20
추가 콘텐츠가없고 flex를 사용하여 보려면 스크롤해야하는 경우가 아니면 바닥 글 섹션을 하단에 유지하는 방법
- 21
바닥 글이 페이지 하단의 콘텐츠와 겹칩니다.
- 22
높이 페이지가 다른 경우 모든 화면 크기의 하단에 바닥 글을 배치하는 방법은 무엇입니까?
- 23
부트 스트랩 고정 바닥 글에 작은 너비 페이지 문제가 있습니다.
- 24
너비가 다른 콘텐츠 div가있는 페이지 하단의 바닥 글
- 25
고정 머리글 / 바닥 글, 스크롤 가능한 콘텐츠, 위 / 아래 공간
- 26
콘텐츠에 높이를 추가하면 바닥 글이 축소됩니다.
- 27
사이드 바 및 콘텐츠를 고정 바닥 글로 확장
- 28
다른 해상도로 콘텐츠 크기가 조정되는 동안 바닥 글을 항상 맨 아래에 유지하려면 어떻게합니까
- 29
두 번째 페이지가 생성 된 경우 페이지 1에서 바닥 글 숨기기
몇 마디 만하겠습니다