해당 링크를보고하십시오, 나는 반대를 원하는 : 내용이 스크롤에 오버 플로우 때, 나는 내 글이 항상되고 싶어 완전한 스택 오버플로 같은 페이지 하단.
div id="footer"와이 CSS가 있습니다.
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}그러나 모든 것은 뷰포트의 맨 아래로 이동하고 아래로 스크롤해도 그대로 유지되므로 더 이상 맨 아래에 없습니다.
영상: 
명확하지 않으면 죄송하지만 모든 콘텐츠의 실제 맨 아래에 고정시키기를 원하지 않습니다.
답변:
이것은 정확히 position: fixed설계된 것입니다.
#footer {
position: fixed;
bottom: 0;
width: 100%;
}바이올린은 다음과 같습니다. http://jsfiddle.net/uw8f9/
fixed충분한 내용이있을 경우 바닥 글 아래에 내용이 스크롤 됩니다. 그것은 나에게 충분합니다. 물론, stackoverflow에있는 것과 같은 매우 큰 바닥 글이 fixed접근 방식에서 제대로 작동하지 않는 것을 알 수 있지만 기본 한 줄 바닥 글의 경우이 방법이 내 의견으로는 잘 작동합니다.
불행히도 약간의 추가 HTML을 추가하지 않고 하나의 CSS를 다른 것에 의존하지 않으면이 작업을 수행 할 수 없습니다.
HTML
첫째로 당신은 당신의 포장 필요 header, footer그리고 #body로 #holderDIV :
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>CSS
그런 다음 설정 height: 100%을 html하고 body(실제 몸이 아니라 당신의 #body당신은 자식 요소에 대한 백분율로 최소 높이를 설정할 수 있도록 DIV).
이제 div min-height: 100%에 설정 #holder하여 화면의 내용을 채우고 div position: absolute바닥에 바닥 글을 배치하는 데 사용 하십시오 #holder.
불행하게도, 당신은 적용해야 padding-bottom받는 사람 #body(가)와 같은 높이 사업부 footer(가)되도록 footer모든 콘텐츠 위에 앉아하지 않습니다이 :
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}실제 예, 짧은 본문 : http://jsfiddle.net/ELUGc/
실제 예, 긴 본문 : http://jsfiddle.net/ELUGc/1/
width 또는 둘 모두를 left 하고 right다음 값으로 설정 auto하고 요소는 내용에 맞게 포장됩니다. 지정 width: 100% 또는 left: 0 과 right:0절대적으로 위치 요소는 컨테이너 요소의 전체 폭을 취하도록합니다
height=100%에 모두 포함하여 포함 된 요소의 <form>요소.
위의 예제에서 나에게 버그 (어딘가 error)가있는 다른 솔루션을 위해 해결했습니다. 선택한 답변과 다른 것입니다.
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}HTML 레이아웃
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>글쎄,이 방법은 오래된 브라우저를 지원하지 않지만 바닥 글을보기 위해 오래된 브라우저가 30px 아래로 스크롤되도록 허용됩니다.
당신은 당신을 닫지 않았다; 위치 후 : 절대. 그렇지 않으면 위의 코드가 완벽하게 작동했을 것입니다!
#footer {
position:absolute;
bottom:30px;
width:100%;
}내가 할 수 있다면 댓글을 달았지만 아직 권한이 없으므로 일부 안드로이드 장치에서 예기치 않은 동작에 대한 힌트로 힌트를 게시합니다.
위치 : 고정은 다음 메타 태그를 사용하여 Android 2.1 ~ 2.3에서만 작동합니다.
<meta name="viewport" content="width=device-width, user-scalable=no">.모든 주요 콘텐츠를 여분의 div 태그 (id = "outer")에 넣음으로써 비슷한 문제를 해결했습니다. 그런 다음이 마지막 "외부"div 태그 외부에서 id = "footer"가있는 div 태그를 이동했습니다. CSS를 사용하여 "outer"의 높이를 지정하고 "footer"의 너비와 높이를 지정했습니다. 또한 CSS를 사용하여 "footer"의 margin-left 및 margin-right를 auto로 지정했습니다. 결과적으로 바닥 글이 내 페이지의 맨 아래에 단단히 고정되어 페이지와 함께 스크롤됩니다 (하지만 여전히 "외부"div 내부에 표시되지만 기본 "콘텐츠"div 외부에서는 행복하지만 이상한 것 같습니다. 내가 원하는 곳).
나는 단지 덧붙이고 싶다-다른 답변의 대부분은 나에게 잘 작동했다. 그러나 작동시키는 데 시간이 오래 걸렸습니다!
설정은 height: 100%부모 div의 높이 만 선택하기 때문입니다 !
따라서 전체 HTML (본문 내부)이 다음과 같은 경우
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>그러면 다음이 잘 될 것입니다.
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}"홀더"는 "몸체"에서 직접 높이를 가져옵니다.
내 머리 아파에 대한 쿠도스, 그의 대답은 내가 일하게 된 결과였습니다!
하나. 전체 페이지의 요소이거나 특정 열 내에 있기 때문에 html이 더 중첩 된 경우 모든 포함 요소 가 height: 100%div에 설정되어 있는지 확인해야합니다 . 그렇지 않으면 "body"와 "holder"사이의 키에 대한 정보가 손실됩니다.
예를 들어, 모든 div에 "전체 높이"클래스를 추가하여 높이가 머리글 / 본문 / 바닥 글 요소까지 내려 오는지 확인하십시오.
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>CSS에서 전체 높이 클래스의 높이를 설정해야합니다.
#full-height{
height: 100%;
}내 문제가 해결되었습니다!
고정식 부트 스트랩 클래스 사용
<div id="footer" class="fixed-bottom w-100">
position:fixed하는 것이 최선의 방법은 아니지만