Chrome Console을 열 때마다 바닥 글이 올라갑니다

저는 CSS가 좋지 않다는 것을 인정합니다. 이것은 내 마지막에는 바보 일지 모르지만 모든 페이지 하단에 끈적 인 바닥 글을 갖고 싶습니다. 대지. 나는이 절대 위치를 사용하고Chrome Console을 열 때마다 바닥 글이 올라갑니다

내 바닥 글에 대한 CSS입니다

position:absolute; 
    bottom:0; 
    height:50px; 
    padding: 10px; 
    width:100%;

그것은 콘솔이 닫힐 때 작동하지만이 크롬 개발자 도구를 열 경우, 바닥 글이 갑자기 것처럼 상승 그렇지 않은 브라우저 창에 고정되었습니다.

뭐가 잘못 되었나요?

다른 사람들은 어떻게 끈끈한 바닥 글을합니까?

편집

, shouldn 나는 문제

http://codepen.io/anon/pen/yMLBdJ

를 열고 개발 도구 바닥 글 아래의 예와 간단한 codepen를 만든 당신은 바닥 글이 여전히 볼 수 있습니다 알 수 있습니다 dev 도구 뒤에는 보이지 않습니다. 그것이 질문입니다. 미안해. 미리 바보 같으면.

출처

2017-02-23 JonnySerra

우리는 코드의 나머지 부분을 볼 필요가있다. 현재 행동을 보여주는 [mcve]를주세요. –

@MichaelCoker 매우 간단한 Codepen으로 질문을 업데이트했습니다. 개발자 도구를 열면 바닥 글이 보이지 않을 때 계속 표시됩니다. 그게 질문입니다. – JonnySerra

이후에

당신이 창에 충실 확인하려면

이 position:fixed이

당신은 그것을 here

과 그리고 당신의 끈적 끈적한 바닥 글에 대한 주위 재생할 수 있습니다 사용을 참조해야합니다 시도해 볼 수있는 바닥 글의 높이를 알 수 있습니다.

html, body { 
    height: 100%; 
} 

// wrapper around all content 
main { 
    min-height: 100%; 
} 

main::after { 
    content: ''; 
    display: block; 
    height: 70px; // height + padding 
} 

footer { 
    background: grey; 
    margin-top: -70px; 
    padding: 10px; 
    height: 50px; 
    width: 100%; 
}

이렇게하면 바닥 글이 내용이 창 높이를 초과하지 않는 한 하단. 바닥 글이 창에 고정 할 경우 바로 추가

position: fixed; 
bottom: 0;

CodePen을 : http://codepen.io/MusikAnimal/pen/OpLeEM

출처

2017-02-23 06:37:19 MusikAnimal

position: absolute 요소는 첫 번째 배치 된 (정적이 아닌) 조상 요소를 기준으로 배치됩니다. 당신이 좋은 article

출처

2017-02-23 05:42:06

Chrome Console을 열 때마다 바닥 글이 올라갑니다

답변

관련 문제