스크롤 할 때 바닥 글이 페이지 하단에 붙지 않습니다.

맨 위에 머리말, 하단에 바닥 글, 오른쪽에 측면 열이 있어야하는 웹 페이지를 코딩하고 있습니다. 꼬리말이 페이지 하단에 표시되는 데 문제가 있습니다. 나는 그것이 위치가되기를 원하지 않는다 : 고정 (짜증나는 일 이겠지만)하지만, 맨 아래로 스크롤 할 때 페이지의 맨 아래에 나타나길 원한다. (스크롤이 필요없는 경우 창 맨 아래에 나타납니다.)스크롤 할 때 바닥 글이 페이지 하단에 붙지 않습니다.

다음은 내가 사용하는 것입니다. 아마 꽤 간단한 수정이 있지만 나는 그것이 무엇인지 보지 못합니다. 이것을 복사하여 붙여 넣으면보실 수 있습니다.

<html> 
    <head> 
    <style type="text/css"> 
     body { 
     font-size: 200%; 
     } 

     #side { 
     position: absolute; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     background-color: #0A0; 
     z-index: 100; 
     } 

     #header { 
     height: 40px; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     background-color: #A00; 
     z-index: 200; 
     } 

     #header_push { 
     clear: both; 
     height: 40px; 
     } 

     #footer { 
     height: 50px; 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     background-color: #00A; 
     z-index: 150; 
     } 

     #footer_push { 
     clear: both; 
     height: 50px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="header"> 
     HEADER 
    </div> 
    <div id="header_push"></div> 
    <div id="content"> 
     <h1>Content</h1> 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p> 
    </div> 
    <div id="side"> 
     SIDE COLUMN 
    </div> 
    <div id="footer_push"></div> 
    <div id="footer"> 
     FOOTER 
    </div> 
    </body>

것은 제대로 작동 :

working incorrectly with scroll

출처

2013-07-27 Geoff

공유 ur jsfiddle link? –

[예] (http://jsbin.com/educat/1/edit)는 [this] (http://stackoverflow.com/a/12255692/1763929)를 참조하십시오. – Vucko

JSBIN

아래로 CSS를 수정하십시오됩니다

#footer { 
    height: 50px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    background-color: #00A; 
    z-index: 150; 
}

는이 작업을 수행하는 방법의 example에 대한 내 의견을 참조하십시오 #footer{..}

출처

2013-07-27 20:25:34

내용을 제거하면 하단에 붙지 않습니다 – Maximus

나는 또한 동일한 문제에 직면하지만이 솔루션은 내 문제를 돕지 못합니다. ( – Emerald

이것은 문제를 해결하지 못합니다 - Vucko의 답변으로 가능한 해결책 – Braza

이봐, 난 당신의 코드를 사용하여 바이올린을했다 : 아래로 스크롤 할 때

working correctly

잘못 근무 (페이지의 측면에 스크롤 막대를 참조) . 내가 아는 바로는 당신이 찾고있는 것입니다. 이게 도움이되는지 알려주세요. 수행

변경 : CSS

#footer { 
    height: 50px; 
    background-color: #00A; 
    z-index: 150; 
    }

링크 바이올린 : 여기 http://jsfiddle.net/daltonpereira/q7Dqg/

출처

2013-07-27 20:21:16

에서 bottom: 0;를 제거합니다.

하지만 상황에 따라 position:relative을 몸에 붙여주세요.

JSBin

그들에게 바닥 글이 relative 위치 부모에있을 것입니다 및 _parent의 하단에있는 바닥 글을 넣어 것 때문에 bottom:0을 가하고, 그 공간을 사용합니다 absolute 위치.

일부 examples of elements with different positions

출처

2013-07-27 20:31:56 Vucko

이것은 가능한 해결책입니다 그것은 css rule'position : relative'를 가진 엘리먼트 내에서 CSS 규칙'position : absolute'를 가진 엘리먼트의 행동과 충돌하기 때문에 의미가 있습니다. – Braza

스크롤 할 때 바닥 글이 페이지 하단에 붙지 않습니다.

답변

관련 문제