스크롤 막대를 사용하지 않음 - 내 페이지를 더 짧게 만들려면 어떻게해야합니까?

우리는 IE, 크롬과 파이어 폭스의 마지막 두 버전을 지원해야하고 나는이 IE 7/8 불가능 느낌이 있지만, 아마도 내가 이동 바닥 글이 뭔가스크롤 막대를 사용하지 않음 - 내 페이지를 더 짧게 만들려면 어떻게해야합니까?

을 누락 콘텐츠 영역 뒤로 -280px. 이 콘텐츠 영역은 헤더 영역 위로 이동하여 -230 픽셀 씩 증가합니다. 결과적으로 페이지 하단에 약 320px의 빈 공간이 생깁니다. 이것을 채우고 그라디언트의 맨 끝으로 보이게 만들 수는 있지만 실제로는 그냥 잘라서 스크롤 바를 만들지 않아도됩니다. 아래의 예제 코드에서

<div id = "page"> 
    <div id = "topbar"> 
    </div> 
    <div id = "header"> 
    </div> 
    <div id = "content"> 
    </div> 
</div> 
<div id = "footer"> 
    I AM THA FOOTAH<br/> So much cooler than the header these days 
</div> 
body 
{ 
/* background-color: #040e22; */ 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    margin: 0px; 
    padding: 0px; 
} 

div 
{ 
    display: block; 
} 


#page 
{ 
    background-color: white; 
    margin: 0px auto; 
    padding: 0px; 
    position: relative; 
} 

#topbar 
{ 
    height: 60px; 
    background-color: #112247; 
    color: white; 
    position: static; 
} 

#header 
{ 
    background-color: navy; 
    color: yellow; 
    height: 240px; 
    position: relative; 
} 

#content 
{ 
    min-height: 280px; 
    background-color: green; 
    width: 480px; 
    margin: auto; 
    position: relative; 
    top: -230px; 
    z-index: 1; 
    height: 2000px; 

} 

#footer 
{ 
    /*background: url("footerGradient.png") repeat-x 50% 0%;*/ 
    background-color: navy; 
    color: white; 
    text-align: center; 
    padding-top: 60px; 
    height: 220px; 
    top: -280px; 
    position: relative; 
} 


.inner 
{ 
    width: 940px; 
    margin: auto; 
}

는 어떻게 해군 바닥 글 아래에있는 흰색의 제거합니까?

출처

2011-01-26 kbertrand

http://ryanfait.com/sticky-footer/ – SLaks

# 푸터를 top: -280px에서 margin-top: -280px으로 바꿉니다.

상대 위치는 요소를 원래 위치로 상대적으로 이동하지만 공간을 보 존하므로 빈 영역이 렌더링되고 음수 여백은 테두리 영역을 포함하여 요소를 이동시키고 필요한 것을 수행합니다.

출처

2011-01-26 22:21:34

당신은 내 영웅입니다! 나는 그것이 단순하거나 불가능할 것임을 알았다. – kbertrand

건배 - 미래를 염두에 두면서 여백이있는 위치는 종종 상대적인 위치 지정에 대한 좋은 대안이며, 특히 음수 값에 대해 말할 때 그렇습니다. :) –

당신과 같이 정적으로하는 상대에서 바닥 글의 위치를 변경할 수 있습니다

#footer 
{ 
    /*background: url("footerGradient.png") repeat-x 50% 0%;*/ 
    background-color: navy; 
    color: white; 
    text-align: center; 
    padding-top: 60px; 
    height: 220px; 
    bottom: 0px; 
    width: 100%; 
    position: fixed; 
}

출처

2011-01-26 22:23:18 ebrown

당신이 sticky footer page에서 살펴 봐야 할 수 있습니다 - 당신은 바닥 글의 높이를 제작하지 않음으로써 그 기술을 수정하고 이전 요소의 음수 여백은 동일합니다. 마이너스 마진을 더 크게하기를 원할 것입니다.

출처

2011-01-26 22:40:30 carols10cents

스크롤 막대를 사용하지 않음 - 내 페이지를 더 짧게 만들려면 어떻게해야합니까?

답변

관련 문제