[css] 스크롤 막대가 있어도 div를 항상 페이지 내용의 맨 아래에 유지

해당 링크를보고하십시오, 나는 반대를 원하는 : 내용이 스크롤에 오버 플로우 때, 나는 내 글이 항상되고 싶어 완전한 스택 오버플로 같은 페이지 하단.

div id="footer"와이 CSS가 있습니다.

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

그러나 모든 것은 뷰포트의 맨 아래로 이동하고 아래로 스크롤해도 그대로 유지되므로 더 이상 맨 아래에 없습니다.

영상:

명확하지 않으면 죄송하지만 모든 콘텐츠의 실제 맨 아래에 고정시키기를 원하지 않습니다.

답변

이것은 정확히 position: fixed설계된 것입니다.

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

바이올린은 다음과 같습니다. http://jsfiddle.net/uw8f9/

답변

불행히도 약간의 추가 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/

답변

위의 예제에서 나에게 버그 (어딘가 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 아래로 스크롤되도록 허용됩니다.

플 런커

답변

나는 ‘다른 답변에 응답하기 위해 이것을 사용하지 않는다’고 말하지만 불행히도 적절한 답변 (!)에 의견을 추가 할 충분한 담당자가 없지만 …

‘My Head Hurts’의 대답으로 asp.net에 문제가있는 경우 HTML 및 BODY 태그뿐만 아니라 기본 생성 된 FORM 태그에 ‘height : 100 %’를 추가해야합니다.

답변

당신은 당신을 닫지 않았다; 위치 후 : 절대. 그렇지 않으면 위의 코드가 완벽하게 작동했을 것입니다!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

답변

내가 할 수 있다면 댓글을 달았지만 아직 권한이 없으므로 일부 안드로이드 장치에서 예기치 않은 동작에 대한 힌트로 힌트를 게시합니다.

위치 : 고정은 다음 메타 태그를 사용하여 Android 2.1 ~ 2.3에서만 작동합니다.

<meta name="viewport" content="width=device-width, user-scalable=no">.

http://caniuse.com/#search=position 참조

답변

이것은 최소 높이를 뷰포트 높이에서 바닥 글 높이를 뺀 값으로 설정하는 viewport 명령을 사용하는 직관적 인 솔루션입니다.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}