Div 전체 공간 사용

내 머리글과 바닥 글은 항상 화면 해상도에 관계없이 맨 위와 맨 아래에 각각 표시해야합니다. 즉 본체에만 스크롤 막대가 있어야합니다.Div 전체 공간 사용

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <div style="height:60px;background:#000;color:#fff;">This is header</div> 
     <div style="height:100%;background:red;" id="red">... 
</div> 
     <div style="height:60px;background:#000;position:fixed;bottom:0px;width:100%;color:#fff;">This is footer</div> 
    </body> 
</html>

가 난 단지 빨간색 섹션 (관계없이 화면 해상도) 스크롤을 차지하려는 :

이

내 jsfiddle입니다. 따라서 그것은 Ipad 또는 아이폰에서도 작동해야합니다. 나는 빨간 부분에 100 %를 주려고했지만 스크롤바의 다른 쪽 끝은 보이지 않습니다. 따라서 바닥 글과 본문이 겹치는 것처럼 보입니다. 아무도 나를 도울 수 없습니까?

출처

2013-01-25 Jack

http://stackoverflow.com/questions/13741871 – Tsar

@Tsar을 : 최고 !!!! Woot Woot !! – Jack

http://jsfiddle.net/sfctB/20/

html,body 
{ 
    height:100%; 
    width:100%; 
    overflow:hidden; 
} 

body 
{ 
    padding: 60px 0px; 
    height: 100%; 
    box-sizing: border-box; 
} 

.header 
{ 
    height:60px; 
    background:#000; 
    color:#fff; 
    width: 100%; 
    position: fixed; 
    top:0; 
} 
.body 
{ 
    overflow-y: scroll; 
    height: 100%; 
} 

.footer 
{ 
    height:60px; 
    background:#000; 
    position:fixed; 
    bottom:0px; 
    width:100%; 
    color:#fff; 
    bottom:0 
}

출처

2013-01-25 11:54:07 Tsar

안녕하세요, 내 PC에서 작동하지 않는 것 같습니다. –

키는 위치 특성입니다. 이 시도 :

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <div style="height:60px;background:#000;color:#fff; position: absolute; top: 0px;">This is header</div> 
     <div style="height:100%;background:red;" id="red">... 
</div> 
     <div style="height:60px;background:#000;position:absolute;bottom:0px;width:100%;color:#fff;">This is footer</div> 
    </body> 
</html>

출처

2013-01-25 11:47:48 Thomas1703

그래도 작동하지 않습니다. – Jack

나는 문제가 당신이 당신의 바닥 글을 겹쳐 콘텐츠에 대한 행복하면 쉽게 할 수있는 일을 달성하려고하는 방법입니다 말할 것입니다.

position:fixed;을 머리글과 바닥 글에 사용하면 고정 된 머리글과 바닥 글을 원하는대로 만들 수 있습니다. 그런 다음 정상적으로 스크롤 할 내용이 필요합니다.

머리글과 바닥 글을 오프셋하고 그 아래 내용을 볼 수 있도록 본문의 위쪽과 아래쪽에 여백을 추가하기 만하면됩니다. 이 경우에는 다음과 같습니다.

body { margin: 60px 0; }

이것은 모바일 장치에서도 작동합니다.

개발자가 스크립트/트릭을 사용하여 기본 동작을 모방하려는 것이 아니라 브라우저가 이미 사용하고있는 것을 사용하도록 조언합니다.

개발 방식에 따라 개발 시간이 추가되고 크로스 브라우저에서 항상 작동하지는 않습니다. 브라우저가 특정 기능/스크립팅 방법 지원을 중단하는 경우에도 사이트 수명이 길어지는 문제가 있습니다.

나는 무슨 뜻인지를 표시하도록 바이올린을 업데이트 한 : http://jsfiddle.net/rnF9p/1/

출처

2013-01-25 11:59:03 jamesmhaley

고맙지 만 근본적으로 잘못된 것 같습니다. 스크롤 막대는 정적 인 검은 부분에 나타납니다. 사용자는 정적 인 상태에서 스크롤바를 기대하지 않습니다. Tsar의 답변 또는이 링크 : http://jsfiddle.net/wPucQ/를 참조하십시오. 정확히 예상대로 동작합니다. – Jack

Div 전체 공간 사용

답변

관련 문제